Question

我正在尝试在函数组件中使用useLocation钩子，但是却得到了Error: Invalid hook call. Hooks can only be called inside of the body of a function component.。

我的应用的结构如下：

import React, {useEffect, useState} from "react";
import Navigation from "./components/Navigation";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
    // ...
    return (
        <Router>
            <div>
                // ...
                <Navigation themes={themes} />
                // ...
                <Switch>
                    <Route path="/mytheme">
                        <MyTheme />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

export default App;

Navigation组件（见上文）如下所示：

import React from "react";
import { Link, useLocation } from "react-router-dom";

function Navigation(props) {
    const location = useLocation(); // ---> this is the problem
    return (
        <div>
            {
                props.themes.map((theme, index) => {
                    return <Link key={index} to={"/" + theme.id}>
                        { theme.name }
                    </Link>
                })
            }
        </div>
    );
}

export default Navigation;

导航工作正常，但是我想在useLocation组件中使用Navigation突出显示活动的“页面”。

Answer 1

对于任何人都可能遇到这个愚蠢的错误，我也遇到了同样的错误，因为我的功能组件名称是“ index”。只需更改组件名称便是我的解决方法。

Answer 2

尝试使用功能性箭头组件，那条线对我有用。

Answer 3

我有同样的错误，只是我的函数被称为 getSearch()。我发现这很奇怪，因为一切都是根据 React 文档进行的。发生我只需要将函数名称更改为 useSearch()，即 use 前缀。

useLocation：只能在函数组件的主体内部调用挂钩

3 个答案: