尝试使用反应路由器重定向反应

Question

所以我有一个似乎无法解决的错误。目前我正在使用 react 和 react router，但是我似乎无法对重定向到页面做出反应。这是我的代码专家（请记住这是一个功能组件）

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

任何帮助将不胜感激！

Answer 1

您可以使用 react-router-dom

中的 Redirect

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>

Answer 2

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

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

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

尝试使用反应路由器重定向反应

Trying to redirect in react using react router

javascript

reactjs

react-tsx