A React Router jelenlegi verziójában (v3) el tudok fogadni egy kiszolgálói választ, és a browserHistory.push
használatával a megfelelő válaszoldalra léphetek. Ez azonban a v4-ben nem áll rendelkezésre, és nem vagyok biztos benne, hogy mi a megfelelő módja ennek a kezelésnek.
Ebben a példában a Redux használatával a components/app-product-form.js meghívja a `this.props.addProduct(props)-t, amikor a felhasználó elküldi az űrlapot. Amikor a szerver sikert ad vissza, a felhasználó a Kosár oldalra kerül.
// 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
});
}
Hogyan tudok a React Router v4 függvényből átirányítást készíteni a Kosár oldalra?
A React Router v4 alapvetően különbözik a v3-tól (és a korábbiaktól), és nem tudod úgy használni a browserHistory.push()
parancsot, mint korábban.
Ez a vita kapcsolódónak tűnik, ha további információra van szükséged:
- Egy új
browserHistory
létrehozása nem fog működni, mert a<BrowserRouter>
létrehozza a saját history példányát, és figyel a változásokra azon. Tehát egy másik példány megváltoztatja az url-t, de nem frissíti a<BrowserRouter>
-t.- A
browserHistory
-t a react-router a v4-ben nem teszi közzé, csak a v2-ben.
Ehelyett van néhány lehetőséged erre:
withRouter
magasrendű komponens használataEhelyett a withRouter
magasrendű komponenst kell használnod, és ezt kell a history-ba toló komponenshez csomagolnod. Például:
<!-- language: lang-js -->
import React from "react";
import { withRouter } from "react-router-dom";
class MyComponent extends React.Component {
...
myFunction() {
this.props.history.push("/some/Path");
}
...
}
export default withRouter(MyComponent);
További információért nézd meg a hivatalos dokumentációt:
A withRouter magasabb rendű komponens segítségével hozzáférhetünk a
history
objektum tulajdonságaihoz és a legközelebbi<Route>
'smatch
objektumhoz. withRouter minden alkalommal, amikor az útvonal változik, újra megjeleníti a komponensét ugyanazokkal a kellékekkel, mint a<Route>
renderelési kellékei:{ match, location, history }
.
A kontextus használata lehet az egyik legegyszerűbb megoldás, de mivel ez egy kísérleti API, instabil és nem támogatott. Csak akkor használd, ha minden más kudarcot vall. Íme egy példa:
<!-- language: lang-js -->
import React from "react";
import PropTypes from "prop-types";
class MyComponent extends React.Component {
static contextTypes = {
router: PropTypes.object
}
constructor(props, context) {
super(props, context);
}
...
myFunction() {
this.context.router.history.push("/some/Path");
}
...
}
Nézd meg a hivatalos dokumentációt a kontextusról:
Ha azt akarod, hogy az alkalmazásod stabil legyen, ne használd a context-et. Ez egy kísérleti API, és a React jövőbeli kiadásaiban valószínűleg elromlik.
Ha e figyelmeztetések ellenére ragaszkodik a kontextus használatához, próbálja meg a kontextus használatát egy kis területre elszigetelni, és lehetőség szerint kerülje a kontextus API közvetlen használatát, hogy könnyebb legyen frissíteni, amikor az API változik.
Én így csináltam:
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>
);
}
}
A this.props.history.push('/cart');
használatával átirányíthatod a kosár oldalra, amely el lesz mentve a history objektumba.
Jó szórakozást, Michael.
A this.context.history.push
nem fog működni.
Sikerült elérnem, hogy a push így működjön:
static contextTypes = {
router: PropTypes.object
}
handleSubmit(e) {
e.preventDefault();
if (this.props.auth.success) {
this.context.router.history.push("/some/Path")
}
}