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

Question

我正在尝试从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。链接和路由本身可以正常工作。在这里找到了一些关于此的主题，但没有明确/有效的解决方案。谢谢。

Answer 1

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

Answer 2

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

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

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

注意component <Route /> 中的道具

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

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

Answer 3

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