this.props.history.push() 似乎不再适用于 React Router v4，有啥替代方案？

Posted 2023-02-21

【中文标题】this.props.history.push() 似乎不再适用于 React Router v4，有啥替代方案？

【英文标题】：this.props.history.push() no longer seems to work in React Router v4, what's the alternative?this.props.history.push() 似乎不再适用于 React Router v4，有什么替代方案？

【发布时间】：2019-10-23 18:39:48

【问题描述】：

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

为了澄清，这是工作流程 -

用户用他们的用户名填写文本框 用户用他们的密码填写一个文本框 用户点击提交按钮 使用用户名和密码调用 API 以验证用户身份 API 返回成功登录成功 成功登录后，用户被重定向到主页

【问题讨论】：

你有没有找到任何解决方案我也面临同样的问题。

@PriyankaSankhala 我现在已经切换到使用函数组件并使用钩子代替它。尝试声明 const history = useHistory() 并使用它。

如果你需要从某个地方开始，这里有关于钩子的全部内容 - reactjs.org/docs/hooks-intro.html

【参考方案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)

【参考方案2】：

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

【参考方案3】：

history.push(location)仍然可以使用

https://reacttraining.com/react-router/core/api/history/history-is-mutable

// usually all you need
<Link to="/somewhere"/>

// but you can use a location instead
const location = 
  pathname: '/somewhere',
  state:  fromDashboard: true 


<Link to=location/>
<Redirect to=location/>
history.push(location)
history.replace(location)