Podjęto modernizację, aby React Router V4 i teraz walczy z metodą history.push
.ReactJS Router V4 history.push nie działa
Mam plik 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"));
A potem mam inny plik, gdzie dodałem proste, aby powrócić do pewnej strony, która wygląda tak:
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>
)
}
}
So Nie wiem, co tu jest nie tak. Po kliknięciu przycisku adres URL zmienia się na /
, ale to wszystko. Czy jest ktoś, kto może mi pomóc?
EDIT
I okazało się, że to działa, kiedy to zrobić:
this.props.history.push('/home')
i
<button onClick={this.onNavigateHome.bind(this)}
ale wydaje się jakoś źle ??
kiedy robię
this.context.history.push('/home')
uzyskać Cannot read property 'context' of null
ale dlaczego ?? Czy moja konfiguracja <BrowserRouter>
jest niewłaściwa?
W każdym razie, dzięki za pomoc :)
na
BrowserRouter domyślnie ma domyślną historię. Zamiast tego musisz użyć routera. Odnośnik: https://reacttraining.com/react-router/web/api/Router – Adriano
Możliwy duplikat [Jak przejść do historii w React Router v4?] (Https://stackoverflow.com/questions/42701129/ how-to-push-to-history-in-react-router-v4) – lux