ReactJS路由器V4 history.push不工作

Question

我已升級到React路由器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>設置錯誤嗎？

無論如何，感謝您的幫助:)

Answer 1

隨着你必須使用this.context.history.push('/cart');
查閱這些職位中更多的內幕V4：

How to push to History in React Router v4?

history.push not working when using BrowserRouter

Answer 2

你有導入{withRouter} from 'react-router-dom'並以這種方式導出您的課程

export default withRouter(Cars)

Answer 3

嘗試在您的BrowserRouter中添加forceRefresh = {true}。

<BrowserRouter forceRefresh={true}>