reactjs - 错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。使用 useEffect 时

Question

我在这段代码中有 Invalid Hook 错误：

import React, { useState, useEffect } from 'react'
import { useLocation, useHistory, Link } from 'react-router-dom'
import $ from 'jquery'

import '../stylesheet/pages/pages.landing.css'
import '../stylesheet/global.css'

export default function Landing() {

    function useQuery() {
        return new URLSearchParams(useLocation().search);
    }

    useEffect(() => {
        alert('a')
    }, [])
}

错误在 useEffect 行，你们能帮帮我吗？

Landing 在我的 Routes 脚本中调用：

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Landing from './pages/Landing';

export default function routes() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/" exact children={Landing} />
            </Switch>
        </BrowserRouter>
    )
}

Answer 1

当您需要渲染时，该children道具被称为普通函数 ，而不是作为组件 - 钩子可能只存在于通过 JSX 语法创建的元素中，这些元素转换为.React.createElement

虽然您可以Landing在内联children道具中调用 with JSX 语法：

children={() => <Landing />}

component使用道具会更合适：

<Route path="/" exact component={Landing} />