Я следую учебному пособию ReactJS, в котором используется React Router 3, в то время как я использую React Router 4. В какой-то момент в учебном пособии маршрутизация выполняется программно. Вот так
import React from "react";
import { browserHistory } from "react-router";
export class User extends React.Component {
onNavigateHome() {
browserHistory.push("/home");
}
render() {
return (
<div>
<h3>The User Page</h3>
<p>User ID: {this.props.params.id}</p>
<button onClick={this.onNavigateHome} className="btn btn-primary">Go Home!</button>
</div>
);
}
}
Я провел небольшое исследование и, похоже, в React Router 4 мне придется творить собственную историю.
У меня это работает с withRouter
import React from "react";
import { Route, Redirect, withRouter } from "react-router-dom";
export class User extends React.Component {
onNavigateHome() {
this.props.history.push("/home")
{/*<Redirect push to="/home"/>*/}
}
render() {
return (
<div>
<h3>The User Page</h3>
<p>User ID: </p>
<button onClick={() => this.onNavigateHome()} className="btn btn-primary">Go home!</button>
</div>
);
}
}
export default withRouter(User);
Но я не уверен, как мне использовать историю, которую я создал. Каков предпочтительный способ сделать это в React Router 4?
Я также рассмотрел альтернативное решение с Redirect
. Я не смог заставить этот работать. Любые предложения, что мне не хватает?
import React from "react";
import { Route, Redirect, withRouter } from "react-router-dom";
export class User extends React.Component {
onNavigateHome() {
<Redirect push to="/home"/>
}
render() {
return (
<div>
<h3>The User Page</h3>
<p>User ID: </p>
<button onClick={this.onNavigateHome} className="btn btn-primary">Go home!</button>
</div>
);
}
}