尝试使用React路由器重定向React

如何解决尝试使用React路由器重定向React

所以我有一个我似乎无法解决的错误。目前，我正在使用react路由器和react路由器，但是我似乎无法获得react重定向到页面的操作。这是我代码中的专家（请记住，这是一个功能组件）

<Route path="/login">
  <Login
    onSubmit={(user) => {
      login(user,(status) => {
        if (status == 200) {
          history.push('/home');
        } else {
          history.push('/login');
        }
      });
    }}
  />
</Route>

（作为参考，我有一个登录组件，该组件接受onSubmit回调，并在其中调用预定义的登录方法以检查来自后端的响应状态并进行相应的重定向）

运行此代码并重定向时，出现错误消息

Unhandled Rejection (TypeError): Cannot read property 'push' of undefined

为了清楚起见，我在组件的前几行中定义了历史记录

let history = useHistory();

任何帮助将不胜感激！

解决方法

您可以使用Redirect中的react-router-dom

import {  Redirect } from "react-router-dom";

...

<Route path="/login">
  <Login
    onSubmit={(user) => {
      login(user,(status) => {
        if (status == 200) {
           return <Redirect to="/home" />
        } else {
          return <Redirect to="/login" />
        }
      });
    }}
  />
</Route>

,

history解析为undefined，因此您尝试调用undefined.push('path')，因此出错。您需要像这样在组件的范围内使history可以访问：

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

const App = () => (
const history = useHistory()
return <Login onSubmit={() => history.push('/path')} />
)