你也可以简单地使用props来访问历史对象:

因为有时我更喜欢通过应用程序切换路由，然后通过按钮，这是一个最小的工作示例，对我有用:

import { Component } from 'react'
import { BrowserRouter as Router, Link } from 'react-router-dom'

class App extends Component {
  constructor(props) {
    super(props)

    /** @type BrowserRouter */
    this.router = undefined
  }

  async handleSignFormSubmit() {
    await magic()
    this.router.history.push('/')
  }

  render() {
    return (
      <Router ref={ el => this.router = el }>
        <Link to="/signin">Sign in</Link>
        <Route path="/signin" exact={true} render={() => (
          <SignPage onFormSubmit={ this.handleSignFormSubmit } />
        )} />
      </Router>
    )
  }
}

我在迁移到React-Router v4时遇到了类似的问题，因此我将在下面解释我的解决方案。

请不要认为这个答案是解决问题的正确方法，我想随着React Router v4变得更加成熟并离开beta版，很有可能会出现更好的答案(它甚至可能已经存在，只是我没有发现它)。

就上下文而言，我遇到了这个问题，因为我偶尔使用Redux-Saga以编程方式更改历史对象(例如当用户成功验证时)。

在React Router文档中，看一下<Router>组件，你可以看到你有能力通过道具传递自己的历史对象。这是解决方案的本质——我们从全局模块向React-Router提供历史对象。

步骤:

Install the history npm module - yarn add history or npm install history --save create a file called history.js in your App.js level folder (this was my preference) // src/history.js import createHistory from 'history/createBrowserHistory'; export default createHistory();` Add this history object to your Router component like so // src/App.js import history from '../your/path/to/history.js;' <Router history={history}> // Route tags here </Router> Adjust the URL just like before by importing your global history object: import history from '../your/path/to/history.js;' history.push('new/path/here/');

现在所有内容都应该保持同步，您还可以通过编程方式设置历史对象，而不是通过组件/容器。

对于那些在使用React router或React router Dom完全初始化路由器之前需要重定向的人，你可以通过简单地访问历史对象并在app.js的结构中将一个新状态推到它上来提供重定向。考虑以下几点:

function getSubdomain(hostname) {
    let regexParse = new RegExp('[a-z\-0-9]{2,63}\.[a-z\.]{2,5}$');
    let urlParts = regexParse.exec(hostname);
    return hostname.replace(urlParts[0], '').slice(0, -1);
}

class App extends Component {

    constructor(props) {
        super(props);


        this.state = {
            hostState: true
        };

        if (getSubdomain(window.location.hostname).length > 0) {
            this.state.hostState = false;
            window.history.pushState('', '', './login');
        } else {
            console.log(getSubdomain(window.location.hostname));
        }

    }


    render() {
        return (

            <BrowserRouter>
                {this.state.hostState ? (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                        <Route path="/" component={PublicContainer}/>
                    </div>
                ) : (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                    </div>
                )

                }
            </BrowserRouter>)
    }


}

在这里，我们想要改变依赖于子域的输出路由，通过在组件呈现之前与历史对象交互，我们可以有效地重定向，同时仍然保留我们的路由。

window.history.pushState('', '', './login');

由于没有其他方法来处理这个可怕的设计，所以我编写了一个使用withRouter HOC方法的通用组件。下面的例子是包装一个按钮元素，但你可以更改为任何你需要的可点击元素:

import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

const NavButton = (props) => (
  <Button onClick={() => props.history.push(props.to)}>
    {props.children}
  </Button>
);

NavButton.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }),
  to: PropTypes.string.isRequired
};

export default withRouter(NavButton);

用法:

<NavButton to="/somewhere">Click me</NavButton>

如此:

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

const SomeComponent = withRouter(({ history }) => (
    <div onClick={() => history.push('/path/some/where')}>
        some clickable element
    </div>); 
);

export default SomeComponent;