Question

我是React的新手，我看到的有关使用React Router重定向的大多数教程似乎都使用了上述代码段。我想要实现的是在成功登录后将用户重定向到我的网站的主页。我已经尝试过history.push，但是根据我的Google搜索，它不再适用于Router v4。我可以做些什么呢？我对有状态和无状态解决方案都开放。

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

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

Answer 1

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

Answer 2

history.push（位置）仍然可以使用

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)

Answer 3

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)

this.props.history.push（）在React Router v4中似乎不再起作用，还有什么选择？

3 个答案: