我的答案和Alex的相似。我不知道为什么React-Router把这个做得如此复杂。为什么我必须用一个HoC来包装我的组件，只是为了访问本质上是全局的?

不管怎样，如果你看一下他们是如何实现<BrowserRouter>的，它只是一个历史记录的小包装。

我们可以把这段历史提取出来，这样我们就可以从任何地方导入。然而，诀窍在于，如果您正在进行服务器端呈现，并试图导入历史模块，那么它将无法工作，因为它使用的是纯浏览器api。但这没关系，因为我们通常只在响应单击或其他客户端事件时重定向。因此，假装一下是可以的:

// history.js
if(__SERVER__) {
    module.exports = {};
} else {
    module.exports = require('history').createBrowserHistory();
}

在webpack的帮助下，我们可以定义一些变量，这样我们就知道我们所处的环境:

plugins: [
    new DefinePlugin({
        '__SERVER__': 'false',
        '__BROWSER__': 'true', // you really only need one of these, but I like to have both
    }),

现在你可以

import history from './history';

从任何地方。它只会在服务器上返回一个空模块。

如果你不想使用这些神奇的变量，你只需要在需要它的全局对象中(在你的事件处理程序中)。导入不能工作，因为它只在顶层工作。

我在迁移到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/');

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

你可以通过这种方式有条件地导航

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

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/path/some/where");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

this.props.history.push("/url")

如果您在组件中没有找到this.props.history可用， 那就试试这个

import {withRouter} from 'react-router-dom'
export default withRouter(MyComponent)  

我的答案和Alex的相似。我不知道为什么React-Router把这个做得如此复杂。为什么我必须用一个HoC来包装我的组件，只是为了访问本质上是全局的?

不管怎样，如果你看一下他们是如何实现<BrowserRouter>的，它只是一个历史记录的小包装。

我们可以把这段历史提取出来，这样我们就可以从任何地方导入。然而，诀窍在于，如果您正在进行服务器端呈现，并试图导入历史模块，那么它将无法工作，因为它使用的是纯浏览器api。但这没关系，因为我们通常只在响应单击或其他客户端事件时重定向。因此，假装一下是可以的:

// history.js
if(__SERVER__) {
    module.exports = {};
} else {
    module.exports = require('history').createBrowserHistory();
}

在webpack的帮助下，我们可以定义一些变量，这样我们就知道我们所处的环境:

plugins: [
    new DefinePlugin({
        '__SERVER__': 'false',
        '__BROWSER__': 'true', // you really only need one of these, but I like to have both
    }),

现在你可以

import history from './history';

从任何地方。它只会在服务器上返回一个空模块。

如果你不想使用这些神奇的变量，你只需要在需要它的全局对象中(在你的事件处理程序中)。导入不能工作，因为它只在顶层工作。

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

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>
    )
  }
}