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

Question

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

应用程序.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;

帐户.js

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

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

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

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

最新的 React 版本、最新的 React Router 版本，以及我react-router-dom在create-react-app. 链接和路由本身运行正常，没有任何问题。在这里发现了一些关于此的主题，但没有明确/有效的解决方案。谢谢。

Answer 1

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