对于React路由器v4+

假设在初始渲染过程中不需要导航（可以使用＜Redirect＞组件），这就是我们在应用程序中所做的。

定义返回null的空路由。这将允许您访问历史对象。您需要在定义路由器的顶层执行此操作。

现在，您可以在历史上做所有可以做的事情，如history.push（）、history.replace（）、history.go（-1）等。！

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';

let routeHistory = null;

export function navigateTo(path) {
  if(routeHistory !== null) {
    routeHistory.push(path);
  }
}

export default function App(props) {
  return (
    <HashRouter hashType="noslash">
      <Route
        render={({ history }) => {
          routeHistory = history;
          return null;
        }}
      />
      {/* Rest of the App */}
    </HashRouter>
  );
}

在React Router v4中实现这一点时面临问题的人。

这里有一个从redux操作导航到React应用程序的工作解决方案。

文件history.js

import createHistory from 'history/createBrowserHistory'

export default createHistory()

文件App.js/Route.jsx

import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
 <Route path="/test" component={Test}/>
</Router>

文件*另一个_File.js或redux文件

import history from './history'

history.push('/test') // This should change the URL and rerender Test component

感谢GitHub上的评论：ReactTraining问题评论

对于ES6+React组件，以下解决方案适用于我。

我跟随费利佩·斯金纳，但添加了一个端到端解决方案，以帮助像我这样的初学者。

以下是我使用的版本：

“反应路由器”：“^2.7.0”“反应”：“^15.3.1”

下面是我的react组件，其中我使用react路由器进行编程导航：

import React from 'react';

class loginComp extends React.Component {
   constructor( context) {
    super(context);
    this.state = {
      uname: '',
      pwd: ''
    };
  }

  redirectToMainPage(){
        this.context.router.replace('/home');
  }

  render(){
    return <div>
           // skipping html code 
             <button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
    </div>;
  }
};

 loginComp.contextTypes = {
    router: React.PropTypes.object.isRequired
 }

 module.exports = loginComp;

以下是路由器的配置：

 import { Router, Route, IndexRedirect, browserHistory } from 'react-router'

 render(<Router history={browserHistory}>
          <Route path='/' component={ParentComp}>
            <IndexRedirect to = "/login"/>
            <Route path='/login' component={LoginComp}/>
            <Route path='/home' component={HomeComp}/>
            <Route path='/repair' component={RepairJobComp} />
            <Route path='/service' component={ServiceJobComp} />
          </Route>
        </Router>, document.getElementById('root'));

只需使用this.props.history.push（'/where/to/go'）；

也许不是最好的解决方案，但它可以完成任务：

import { Link } from 'react-router-dom';

// Create functional component Post
export default Post = () => (
    <div className="component post">

        <button className="button delete-post" onClick={() => {
            // ... delete post
            // then redirect, without page reload, by triggering a hidden Link
            document.querySelector('.trigger.go-home').click();
        }}>Delete Post</button>

        <Link to="/" className="trigger go-home hidden"></Link>

    </div>
);

基本上，与一个操作相关的逻辑（在本例中为删除后操作）最终将调用重定向触发器。这并不理想，因为您将在标记中添加DOM节点“触发器”，以便在需要时方便地调用它。此外，您将直接与DOM交互，这在React组件中可能是不需要的。

不过，这种类型的重定向并不经常需要。因此，在组件标记中添加一两个额外的隐藏链接并不会造成太大的伤害，特别是如果您为它们提供了有意义的名称。

随着React Router v4即将推出，现在有了一种新的实现方式。

import { MemoryRouter, BrowserRouter } from 'react-router';

const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;

<Router location="/page-to-go-to"/>

react lego是一个示例应用程序，展示了如何使用/更新react router，它包括导航应用程序的示例功能测试。