En la versión actual de React Router (v3) puedo aceptar una respuesta del servidor y utilizar browserHistory.push
para ir a la página de respuesta apropiada. Sin embargo, esto no está disponible en la v4, y no estoy seguro de cuál es la forma adecuada de manejar esto.
En este ejemplo, usando Redux, components/app-product-form.js llama a this.props.addProduct(props)
cuando un usuario envía el formulario. Cuando el servidor devuelve un éxito, el usuario es llevado a la página del carrito.
// 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
});
}
¿Cómo puedo hacer una redirección a la página Cart desde la función para React Router v4?
React Router v4 es fundamentalmente diferente de v3 (y anteriores) y no se puede hacer browserHistory.push()
como antes.
Esta discusión parece estar relacionada si quieres más información:
Crear un nuevo browserHistory
no funcionará porque <BrowserRouter>
crea su propia instancia del historial, y escucha los cambios en ella. Así que una instancia diferente cambiará la url pero no actualizará el <BrowserRouter>
.
browserHistory
no está expuesto por react-router en la v4, sólo en la v2.En su lugar tienes algunas opciones para hacer esto:
withRouter
.En su lugar, debe utilizar el componente de alto orden withRouter
, y envolverlo con el componente que empujará a la historia. Por ejemplo:
idioma: lang-js -->
import React from "react";
import { withRouter } from "react-router-dom";
class MiComponente extends React.Componente {
...
miFunción() {
this.props.history.push("/alguna/Ruta");
}
...
}
export default withRouter(MyComponent);
Consulta la documentación oficial para más información:
context
.Usar el contexto puede ser una de las soluciones más fáciles, pero al ser una API experimental es inestable y no tiene soporte. Utilízala sólo cuando todo lo demás falle. Aquí'hay un ejemplo:
lenguaje: 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);
}
...
miFunción() {
this.context.router.history.push("/alguna/Ruta");
}
...
}
Echa un vistazo a la documentación oficial sobre el contexto:
Si quieres que tu aplicación sea estable, no uses context. Es una API experimental y es probable que se rompa en futuras versiones de React.
Si insistes en usar context a pesar de estas advertencias, intenta aislar tu uso de context a un área pequeña y evita usar la API de context directamente cuando sea posible para que sea más fácil actualizar cuando la API cambie.
Así es como lo hice:
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>
);
}
}
Usa this.props.history.push('/cart');
para redirigir a la página del carrito que se guardará en el objeto historia.
Que lo disfrutes, Michael.
this.context.history.push
no funcionará.
He conseguido que push funcione así:
static contextTypes = {
router: PropTypes.object
}
handleSubmit(e) {
e.preventDefault();
if (this.props.auth.success) {
this.context.router.history.push("/some/Path")
}
}