使用 React Router 进行转换/重定向的正确方法是什么？答案

【问题标题】：What is ACTUALLY the right way to transition/redirect using React Router?使用 React Router 进行转换/重定向的正确方法是什么？
【发布时间】：2017-11-23 03:37:59
【问题描述】：

我正在学习 React Router，我似乎无法弄清楚目前推荐的重定向方式是什么。我已经阅读了很多文章和 StackOverflow 帖子，但是种类繁多，我不确定要为当前版本的 React Router 实现哪一个。

我要做的是在使用 axios 进行 AJAX 调用后重定向。

axios.post('/some-route')
    .then(/*I want to redirect here*/)

注意：此代码位于 React.Component 中的函数内部，在提交表单时会调用该函数。

我该如何做到这一点？

请告诉我您需要什么详细信息。

【问题讨论】：

你用的是什么版本的 react-router？

标签： reactjs react-router react-jsx jsx

【解决方案1】：

此答案适用于react-router-v4。

如果你想redirect来自同一个component（不是来自一些action）并且这个component是由一些route渲染的，那么你可以使用history对象在props中传递.

componentDidMount(){
    if(this.state.some_param){
        this.props.history.push("/some_location")
    }
}

最好的方法是创建自己的history 对象。您可以在任何action 中使用此history 对象。

//history.js
import createHistory from 'history/createBrowserHistory'

export default createHistory()

然后你可以在你的路由器中使用这个历史记录，

import history from "./history"

<Router history = {history}>
    //other code
</Router>

现在您可以在任何地方使用此历史记录对象进行重定向，

axios.post('/some-route')
.then(res=>{
    history.push("/some_location")
})

const {Component} = React
const {render} = ReactDOM

const {Router, Link, Route, Switch, withRouter, Redirect} = ReactRouterDOM

const createHistory = History.createHashHistory

const myhistory = createHistory()

class App extends Component{
  redirectToHome(){
    myhistory.push("/home")
  }
  redirectToAbout(){
    myhistory.push("/about")
  }
  render(){
  return(
    <div>
      <Route path = "/home" component = {Home} />
      <Route path = "/about" component = {About} />
      <button onClick = {this.redirectToHome}>Redirect to home</button>
      <button onClick = {this.redirectToAbout}>Redirect to about</button>
    </div>
  )
  }
}

const Home = ()=>{
  return(
    <div>
      Home
    </div>
  )
}

const About = ()=>{
  return(
    <div>About</div>
  )
}


render(<Router history = {myhistory}><App/></Router>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://unpkg.com/react-router-dom@4.1.1/umd/react-router-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/history/4.6.3/history.min.js"></script>
<div id="app"></div>

【讨论】：

我按照你的建议做了：创建了一个 history.js 文件并在需要时导入它。因此，现在执行 history.push 会更改 URL，但视图中没有任何变化。关于为什么会发生这种情况的任何想法？
@GregyPooh 你是否将history 对象传递给router ？
@GregyPooh 如果您使用自己的history，也请使用Router 而不是BrowserRouter。
为什么这适用于Router，而不适用于BrowserRouter？
@GregyPooh BrowserRouter 创建自己的history，它不会使用作为道具传递的历史。

【解决方案2】：

从 React Router v4 开始，browserHistory 不再从 react-router 导出。

你有两种可能。

1) 如果你的组件是通过路由渲染的（是<Route> 组件的component 属性，那么你会自动获取一些对象作为属性：

历史
匹配
位置

然后您可以在组件的上下文中使用this.props.history.push("/some_location")

2) 如果您的组件与特定路由无关，您可以使用 withRouter 高阶组件获得相同的道具，该组件是 react-router 的一部分

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

const Component = ( { history, location, match } ) => (
// your component code
);

export default withRouter(Component);

【讨论】：

【解决方案3】：

你可以使用browserHistory：

  import { browserHistory } from "react-router";

  browserHistory.push({
     pathname: '/your/path'
  });

【讨论】：

在v4中有一个历史传递在路由中，然后你可以在组件中使用它作为this.props.history.push('/routesample/');