ReactJS Router V4 history.push 不工作

Question

我已经升级到 React Router V4，现在正在努力使用 history.push 方法。

我有一个 index.js 文件：

 import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

import { Main} from "./components/Main";
import { About } from "./components/About";
import { Cars} from "./components/Cars";

class App extends React.Component {

render() {
    return (
        <BrowserRouter history={history}>

            <div>
                <Route path={"/"} component={Main} />
                <Route path={"/cars"} component={Cars}/>
                <Route path={"/about"} component={About}/>
            </div>
        </BrowserRouter>
    )
  }
}

render(<App/>, window.document.getElementById("app"));

然后我有另一个文件，我在其中添加了一个简单的返回到某个页面，如下所示：

 import React from "react";
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

export class Cars extends React.Component {
  navigateBack() {
    history.push('/')
  }

  render() {
    return(
        <div>
            <h3>Overview of Cars</h3>
            <p>Model: </p>
            <button onClick={this.navigateBack} className="btn btn-primary">Back</button>
        </div>
    )
  }
}

所以，我无法弄清楚这里出了什么问题。当我单击该按钮时，URL 更改为 / 但仅此而已。有人可以帮助我吗？

编辑

我发现，当我这样做时它会起作用：

 this.props.history.push('/home')

和

<button onClick={this.onNavigateHome.bind(this)}

但这似乎是错误的？？

当我做

this.context.history.push('/home')

我得到 Cannot read property 'context' of null 但是为什么？我的 <BrowserRouter> 设置错了吗？？

无论如何，感谢您的帮助:)

原文由 ST80 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须导入 {withRouter} from 'react-router-dom' 并以这种方式导出您的课程

export default withRouter(Cars)

原文由 Steven Daniel Anderson 发布，翻译遵循 CC BY-SA 3.0 许可协议