V aktuální verzi React Router (v3) mohu přijmout odpověď serveru a pomocí browserHistory.push
přejít na příslušnou stránku s odpovědí. Ve verzi v4 však tato možnost není k dispozici a já si nejsem jistý, jaký je vhodný způsob, jak s tím zacházet.
V tomto příkladu, který používá Redux, components/app-product-form.js volá this.props.addProduct(props)
, když uživatel odešle formulář. Když server vrátí úspěch, je uživatel přesměrován na stránku Košík.
// 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
});
}
Jak mohu vytvořit přesměrování na stránku Košík z funkce pro React Router v4?
React Router v4 se zásadně liší od v3 (a dřívějších verzí) a nelze provádět browserHistory.push()
jako dříve.
Pokud chcete více informací, zdá se, že s tím souvisí tato diskuse:
Vytvoření nové browserHistory
nebude fungovat, protože <BrowserRouter>
vytváří vlastní instanci historie a naslouchá jejím změnám. Takže jiná instance změní url, ale neaktualizuje <BrowserRouter>
.
BrowserHistory
není vystaven v react-routeru v4, pouze ve v2.Místo toho máte několik možností, jak to udělat:
withRouter
vyššího řáduMísto toho byste měli použít komponentu withRouter
vysokého řádu a tu přibalit ke komponentě, která bude odesílat do historie. Například:
<!-- jazyk: 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);
Další informace najdete v oficiální dokumentaci:
Přístup k vlastnostem objektu history
a k nejbližšímu objektu <Route>
's match
získáte prostřednictvím komponenty vyššího řádu withRouter. withRouter při každé změně trasy znovu vykreslí svou komponentu se stejnými rekvizitami, jako má <Route>
vykreslovací rekvizity: { match, location, history }
.
context
Použití kontextu může být jedním z nejjednodušších řešení, ale jako experimentální API je nestabilní a nepodporované. Používejte jej pouze tehdy, když všechno ostatní selže. Zde je příklad:
<!-- jazyk: 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");
}
...
}
Podívejte se na oficiální dokumentaci o kontextu:
Pokud chcete, aby vaše aplikace byla stabilní, nepoužívejte kontext. Jedná se o experimentální API a v budoucích verzích Reactu se pravděpodobně rozbije.
Pokud i přes tato varování trváte na používání kontextu, snažte se používání kontextu izolovat na malou oblast a pokud možno se vyhněte přímému používání API kontextu, aby'bylo snazší provést upgrade, až se API změní.
Takto jsem to udělal já:
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>
);
}
}
Použijte this.props.history.push('/cart');
pro přesměrování na stránku košíku, která se uloží do objektu historie.
Užijte si to, Michaeli.
this.context.history.push
nebude fungovat.
Push se mi podařilo zprovoznit takto:
static contextTypes = {
router: PropTypes.object
}
handleSubmit(e) {
e.preventDefault();
if (this.props.auth.success) {
this.context.router.history.push("/some/Path")
}
}