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

Question

所以我有一个似乎无法解决的错误。目前我正在使用 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();

任何帮助将不胜感激！

Answer 1

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

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

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

Answer 2

您可以从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>