useHistory react-router-dom 无效的钩子调用

Posted 2023-02-21

【中文标题】useHistory react-router-dom 无效的钩子调用

【英文标题】：useHistory react-router-dom invalid hook call

【发布时间】：2021-04-08 05:50:28

【问题描述】：

我正在尝试从react-router-dom 实现useHistory 挂钩，但它似乎不起作用。抛出无效的钩子调用

App.js

import React,  Component  from 'react';
<...>
import  Signup  from './Signup.js';
import  Login  from './Login.js';
import  Account  from './Account.js';
import  AuthProvider  from './contexts/AuthContext.js';
import  BrowserRouter as Router, Switch, Route  from 'react-router-dom';

class App extends Component 
    <...>

    render() 
        return(
            <>
               <...>
                <Router>
                    <AuthProvider>
                        <Switch>
                            <Route exact path="/" component=Signup />
                            <Route path="/signup" component=Signup />
                            <Route path="/login" component=Login />
                            <Route path="/account" component=Account />
                        </Switch>
                    </AuthProvider>
                </Router>
            </>
        );
    


export default App;

Account.js

import React from 'react';
import  useHistory  from 'react-router-dom';

export const Account = () => 
    const history = useHistory();
    return(
        <h1>Hello...</h1>
    );

它在这一行抛出错误：const history = useHistory();

错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一： <...>

最新的 React 版本，最新的 React Router 版本，如果有什么不同的话，我在create-react-app 之后安装了react-router-dom。链接和路由本身可以正常工作。在这里找到了一些关于此的主题，但没有明确/有效的解决方案。谢谢。

【问题讨论】：

我没有发现提供的代码 sn-ps 有问题。认为您尝试将其复制到 running 代码框并在您的问题中提供链接，以便我们可以在其中进行调试？

类似问题，不知道为什么它不起作用。我最终删除了 node_modules，清除了缓存并重新安装了依赖项。之后工作得很好。

【参考方案1】：

找到了一个解决方案：之前我直接从 macOS 终端安装了 react-router-dom，除了 useHistory 之外一切正常，但是这次我直接从 VS 代码的终端安装了 react-router-dom，现在它似乎工作正常。希望这对遇到此问题的人有所帮助。

【讨论】：

哇，工作 4 小时后，搜索您的简单解决方案，与我一起工作（我有克隆 repo 并在 useHistory 不工作之后运行 yarn）但手动安装后（ yarn add react-router-dom ）每个想法都很好 THX PRO ?

【参考方案2】：

在我的情况下，错误是由我在其他地方找不到的东西引起的。

以你为例，我使用了类似的东西：

<Route path="/signup" children=Signup />
// So I changed it to
<Route path="/signup" component=Signup />

注意component <Route /> 中的道具

我相信错误是因为组件只是调用组件而子组件附加它，所以我会调用 react 和/或 hooks 两次。

如果有人知道并且可以更好地解释，请随时这样做！

【讨论】：

我想补充一点，我在使用 useParams() 时遇到了同样的问题。通过上述修改，我能够解决它。

【参考方案3】：

我检查了 package.json，发现我没有npm install react-router-dom。

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击 进行提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review