在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问题评论

如果您正在使用哈希或浏览器历史记录，那么您可以

hashHistory.push('/login');
browserHistory.push('/login');

以下是如何使用带有ES6的react router v2.0.0来实现这一点。react路由器已远离mixin。

import React from 'react';

export default class MyComponent extends React.Component {
  navigateToPage = () => {
    this.context.router.push('/my-route')
  };

  render() {
    return (
      <button onClick={this.navigateToPage}>Go!</button>
    );
  }
}

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

对于最新的反应路由器dom v6

useHistory（）替换为useNavigate（）。

您需要使用：

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/your-page-link');

这可能不是最好的方法，但。。。使用react router v4，下面的TypeScript代码可以为一些人提供一些想法。

在下面的渲染组件（例如LoginPage）中，可以访问router对象，只需调用router.transitionTo（'/home'）即可导航。

导航代码取自。

“react router”：“^4.0.0-2”，“反应”：“^15.3.1”，

从“react Router/BrowserRouter”导入路由器；从“react History/BrowserHistory”导入｛History｝；从“history/createBrowserHistory”导入createHistory；consthistory=createHistory（）；接口MatchWithPropsInterface{component:React.component的类型，router:路由器，历史：历史，确切地？：任何图案：字符串}类MatchWithProps扩展React.Component＜MatchWithPropsInterface，any＞{render（）{返回(<Match｛…this.props｝render={（matchProps）=>(React.createElement（this.props.component，this.props）)}/>)}}ReactDOM.渲染(<路由器>｛（｛路由器｝）=>(＜div＞<MatchWithProps justly pattern=“/”component=｛LoginPage｝router=｛router｝history=｛history｝/>＜MatchWithProps pattern＝“/login”component＝｛LoginPage｝router＝｛router｝history＝｛history｝/＞<MatchWithProps pattern=“/home”component=｛homepage｝router=｛router｝history=｛history｝/>＜缺少组件＝｛NotFoundView｝/＞</div>)}</路由器>，document.getElementById（'app'）);

React Router 4.x答案

在我这一方面，我希望有一个单独的历史对象，我甚至可以携带外部组件。我喜欢按需导入一个history.js文件，并对其进行操作。

您只需将BrowserRouter更改为Router，并指定历史属性。这对你来说没有任何改变，除了你有自己的历史对象，你可以随心所欲地操纵它。

您需要安装历史记录，即react router使用的库。

示例用法，ES6表示法：

history.js

import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()

基本组件.js

import React, { Component } from 'react';
import history from './history';

class BasicComponent extends Component {

    goToIndex(e){
        e.preventDefault();
        history.push('/');
    }

    render(){
        return <a href="#" onClick={this.goToIndex}>Previous</a>;
    }
}

如果您必须从实际从Route组件渲染的组件进行导航，还可以从props访问历史，如下所示：

基本组件.js

import React, { Component } from 'react';

class BasicComponent extends Component {

    navigate(e){
        e.preventDefault();
        this.props.history.push('/url');
    }

    render(){
        return <a href="#" onClick={this.navigate}>Previous</a>;
    }
}