Я обновился до 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>
неправильной?
В любом случае, спасибо за помощь:)