V trenutni različici React Router (v3) lahko sprejmem odziv strežnika in uporabim browserHistory.push
za prehod na ustrezno stran z odgovorom. Vendar v različici v4 to ni na voljo in nisem prepričan, kakšen je ustrezen način za ravnanje s tem.
V tem primeru, ki uporablja Redux, components/app-product-form.js pokliče this.props.addProduct(props)
, ko uporabnik odda obrazec. Ko strežnik vrne sporočilo o uspehu, se uporabnik prikaže na strani z nakupovalnim vozičkom.
// actions/index.js
export function addProduct(props) {
return dispatch =>
axios.post(`${ROOT_URL}/cart`, props, config)
.then(response => {
dispatch({ type: types.AUTH_USER });
localStorage.setItem('token', response.data.token);
browserHistory.push('/cart'); // no longer in React Router V4
});
}
Kako lahko naredim preusmeritev na stran Košarica iz funkcije za React Router v4?
React Router v4 se bistveno razlikuje od v3 (in prejšnjih) in ne morete narediti browserHistory.push()
kot včasih.
[Ta razprava] (https://github.com/ReactTraining/react-router/issues/4059) se zdi povezana, če želite več informacij:
Ustvarjanje nove browserHistory
ne bo delovalo, ker <BrowserRouter>
ustvari svoj primerek zgodovine in posluša spremembe na njem. Zato bo druga instanca spremenila url, ne bo pa posodobila <BrowserRouter>
.
BrowserHistory
v različici v4 ni izpostavljen s strani react-routerja, temveč le v različici v2.Namesto tega imate na voljo nekaj možnosti:
withRouter
Namesto tega uporabite komponento withRouter
visokega reda in jo ovijte v komponento, ki bo potiskala v zgodovino. Na primer:
jezik: lang-js -->: <!-- jezik: lang-js -->
uvozite React iz "react";
uvoz { withRouter } iz "react-router-dom";
razred MyComponent razširja React.Component {
...
myFunction() {
this.props.history.push("/some/Path");
}
...
}
export default withRouter(MyComponent);
Za več informacij si oglejte [uradno dokumentacijo] (https://reacttraining.com/react-router/web/api/withRouter):
context
Uporaba konteksta je morda ena najlažjih rešitev, vendar je kot eksperimentalni API nestabilen in nepodprt. Uporabite ga le, če vse drugo odpove. Tukaj je primer:
<!-- jezik: lang-js -->
import React from "react";
import PropTypes from "prop-types";
razred MyComponent razširja React.Component {
static contextTypes = {
router: PropTypes.object
}
constructor(props, context) {
super(props, context);
}
...
myFunction() {
this.context.router.history.push("/some/Path");
}
...
}
Oglejte si uradno dokumentacijo o kontekstu:
Če želite, da je vaša aplikacija stabilna, ne uporabljajte konteksta. Gre za eksperimentalni API, ki se bo v prihodnjih izdajah Reacta verjetno pokvaril.
Če kljub tem opozorilom vztrajate pri uporabi konteksta, poskusite uporabo konteksta omejiti na majhno območje in se po možnosti izogibajte neposredni uporabi kontekstnega API-ja, da ga boste lažje nadgradili, ko se API spremeni.
To sem naredil tako:
import React, {Component} from 'react';
export default class Link extends Component {
constructor(props) {
super(props);
this.onLogout = this.onLogout.bind(this);
}
onLogout() {
this.props.history.push('/');
}
render() {
return (
<div>
<h1>Your Links</h1>
<button onClick={this.onLogout}>Logout</button>
</div>
);
}
}
Uporabite this.props.history.push('/cart');
za preusmeritev na stran košarice, ki bo shranjena v objektu zgodovine.
Uživajte, Michael.
this.context.history.push
ne bo deloval.
Uspelo mi je, da je push deloval takole:
static contextTypes = {
router: PropTypes.object
}
handleSubmit(e) {
e.preventDefault();
if (this.props.auth.success) {
this.context.router.history.push("/some/Path")
}
}