ReactJS Router V4 history.push không hoạt động

Question

Tôi đã nâng cấp lên React Router V4 và hiện đang vật lộn với phương pháp history.push.

Tôi có một file 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")); 

Và sau đó tôi có một tập tin, nơi tôi đã thêm một đơn giản để trở lại một trang nào đó mà trông như thế này:

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

Vì vậy, , Tôi không thể tìm ra những gì đang xảy ra ở đây. Khi tôi nhấp vào nút, URL sẽ thay đổi thành / nhưng đó là tất cả. Có ai có thể giúp tôi không?

EDIT

tôi phát hiện ra rằng nó hoạt động khi tôi làm điều này:

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

và

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

nhưng có vẻ như sai bằng cách nào đó ??

khi tôi làm

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

tôi nhận được Cannot read property 'context' of null nhưng tại sao ?? Thiết lập <BrowserRouter> của tôi có sai không ??

Dù sao, nhờ sự giúp đỡ :)

Answer 1

Với v4 bạn phải sử dụng this.context.history.push('/cart');
kiểm tra ra những bài viết để biết thêm những hiểu biết:

How to push to History in React Router v4?

history.push not working when using BrowserRouter

Answer 2

Bạn có để nhập {withRouter} from 'react-router-dom' và xuất lớp của bạn theo cách này

export default withRouter(Cars)

Answer 3

Thử thêm forceRefresh = {true} vào BrowserRouter của bạn.

<BrowserRouter forceRefresh={true}>