Question

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

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();

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

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

Answer 1

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

Answer 2

就我而言，错误是由我在别处找不到的东西引起的。

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

library(purrr)
map(df_rows, ~ tibble(z = rnorm(.x)))
[[1]]
# A tibble: 43,497 x 1
         z
     <dbl>
 1  2.72  
 2  0.217 
 3 -0.695 
 4  0.0398
 5 -1.62  
 6  0.474 
 7 -0.763 
 8 -0.489 
 9  0.0898
10  2.42  
# … with 43,487 more rows

[[2]]
# A tibble: 20,681 x 1
        z
    <dbl>
 1  0.720
 2 -0.704
 3  1.72 
 4 -0.402
 5 -2.38 
 6 -0.192
 7  0.780
 8 -1.87 
 9  0.734
10 -1.60 
# … with 20,671 more rows
#...

注意 <Route path="/signup" children={Signup} /> // So I changed it to <Route path="/signup" component={Signup} /> 中的 component 道具

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

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

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

2 个答案: