this.props.history.push() 似乎不再在 React Router v4 中工作，有什么替代方案吗？

Question

我是 React 新手，我看到的大多数有关使用 React Router 进行重定向的教程似乎都在使用上述代码片段。我想要实现的目标是在成功登录后将用户重定向到我网站的主页。我尝试过history.push，但根据我的谷歌搜索，它不再在路由器v4中工作。我可以做什么作为替代方案？我对有状态和无状态解决方案持开放态度。

澄清一下，这是工作流程 -

1. 用户用他们的用户名填写文本框
2. 用户用密码填写文本框
3. 用户点击提交按钮
4. 使用用户名和密码调用 API 来验证用户身份
5. 登录成功API返回success
6. 登录成功后，用户将被重定向至主页

Answer 1

history.push('./path')

在 React Router v4 中仍然可用，你需要添加

withRouter

示例

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import compose from 'recompose/compose'

class Test extends Component {
  render () {
    const { history } = this.props

    return (
     <div>
       <Button onClick={() => history.push('./path')}
     </div>
    )
  }
}

export default compose(
  withRouter,
)(Test)

Answer 2

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

export default function navigationExample() {
  const navigate = useNavigate();
    
  return (
    <>
       <Button
          type="ice"
          text="WHITELIST"
          onCLick={() => navigate("/login")}
        />
    </>
  );
}

Answer 3

您可以使用重定向组件。 https://reacttraining.com/react-router/web/api/Redirect

Answer 4

您可以使用 useNavigate 功能导航到其他页面，只需使用 react-router-dom 中的 useNavigate 并导航到您想要的页面 首先从react-router-dom库导入它

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

export default function login() {
  const navigate = useNavigate();
     
  const handleSubmit = () => {
     navigate("/routeName_that_you_wish_to_navigate_to");
  }
  return (
    <>
      <Button
          type="submit"
          text="Submit"
          onCLick={() => handleSubmit()}
        />
    </>
  );
}