这是一个可重现的示例，说明如何以编程方式更改 react router v4 中的路由。

首先，为一个简单的应用程序安装样板：

sudo npm install -g create-react-app
create-react-app demo-app
cd demo-app
npm install react-router-dom

然后我们将更/src/App.js改为：

import React from 'react'
import {BrowserRouter as Router, Route, Link, withRouter} from 'react-router-dom'

const BasicExample = () => (
  <Router>
    <div>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const Button = withRouter(({history}) => (
  <button type='button' onClick={() => { history.push('/new-location') }}>Click Me!</button>
))

const About = () => (
  <div>
    <h2>About</h2>
    <Button />
  </div>
)

export default BasicExample

然后启动你的服务器：

npm run start

如果导航到 localhost:3000，然后单击关于，您将看到按钮组件。单击它将以编程方式将路由更改为/new-location

您不再需要使用 browserHistory。React-router-dom 注入到您的组件路由相关的props和上下文中。其中一个props是'history'，在这个history 对象上是一个函数push，你可以调用它并传递你想要导航到的路线。

在 Class 基础组件中的示例，您可以创建如下所示的函数作为 onClick 处理程序以重定向到特定链接

redirectToSessionStatePage() {
 this.props.history.push('/sessionstate2'); OR
 this.context.router.history.push('/sessionstate2');
}

在基于函数的无状态组件中

redirectToSessionStatePage() {
 props.history.push('/sessionstate2'); OR
 context.router.history.push('/sessionstate2');
}