ReactJS 라우터 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)} 

하지만 어떻게 든 잘못된 것 같다 ??

내가 왜 Cannot read property 'context' of null하지만 얻을

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

할 때? 내 <BrowserRouter> 설정이 잘못 되었습니까 ??

어쨌든 도움말 : 당신이 더 많은 통찰력 this.context.history.push('/cart');이
체크 아웃이 게시물을 사용할 필요가 V4와

Answer 1

주셔서 감사합니다 : 당신은이

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