Respuesta de React-Router 5.1.0+ (usando ganchos y React> 16.8)
Puede usar el nuevo useHistoryenlace en Componentes funcionales y navegar mediante programación:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
Respuesta de React-Router 4.0.0+
En 4.0 y versiones posteriores, use el historial como accesorio de su componente.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
NOTA: this.props.history no existe en el caso de que su componente no haya sido procesado por <Route>. Deberías usar <Route path="..." component={YourComponent}/>this.props.history en YourComponent
Respuesta de React-Router 3.0.0+
En 3.0 y superior, use el enrutador como accesorio de su componente.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Respuesta
En 2.4 y superiores, use un componente de orden superior para obtener el enrutador como accesorio de su componente.
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
// Export the decorated class
var DecoratedExample = withRouter(Example);
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};
Respuesta de React-Router 2.0.0+
Esta versión es compatible con versiones anteriores de 1.x, por lo que no hay necesidad de una Guía de actualización. Solo pasar por los ejemplos debería ser lo suficientemente bueno.
Dicho esto, si desea cambiar al nuevo patrón, hay un módulo de Historia del navegador dentro del enrutador al que puede acceder con
import { browserHistory } from 'react-router'
Ahora tiene acceso al historial de su navegador, por lo que puede hacer cosas como empujar, reemplazar, etc.
browserHistory.push('/some/path')
Lecturas adicionales:
historias y
navegación
React-Router 1.xx Respuesta
No entraré en detalles de actualización. Puedes leer sobre eso en el Guía de actualización
El cambio principal sobre la pregunta aquí es el cambio de Navigation mixin a History. Ahora está usando el historial del navegador API para cambiar la ruta, así que usaremospushState() de ahora en adelante.
Aquí hay un ejemplo usando Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Tenga en cuenta que esto Historyproviene de rackt / history proyecto . No del propio React-Router.
Si no desea usar Mixin por alguna razón (tal vez debido a la clase ES6), puede acceder al historial que obtiene del enrutador this.props.history. Solo será accesible para los componentes representados por su enrutador. Entonces, si desea usarlo en cualquier componente secundario, debe pasarlo como un atributo a través deprops .
Puede leer más sobre el nuevo lanzamiento en su documentación 1.0.x
Aquí está una página de ayuda específicamente sobre cómo navegar fuera de su componente
Recomienda tomar una referencia history = createHistory()y recurrir replaceStatea eso.
React-Router 0.13.x Respuesta
Me metí en el mismo problema y solo pude encontrar la solución con la combinación de navegación que viene con react-router.
Así es como lo hice
import React from 'react';
import {Navigation} from 'react-router';
let Authentication = React.createClass({
mixins: [Navigation],
handleClick(e) {
e.preventDefault();
this.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
Pude llamar transitionTo() sin necesidad de acceder.context
O podrías probar el elegante ES6 class
import React from 'react';
export default class Authentication extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
}
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
}
Authentication.contextTypes = {
router: React.PropTypes.func.isRequired
};
React-Router-Redux
Nota: si está utilizando Redux, hay otro proyecto llamado
ReactRouter-Redux que le da Redux fijaciones para ReactRouter, usando un poco el mismo enfoque que
Reaccionar-Redux hace
React-Router-Redux tiene algunos métodos disponibles que permiten una navegación sencilla desde los creadores de acciones internas. Estos pueden ser particularmente útiles para las personas que tienen una arquitectura existente en React Native y desean utilizar los mismos patrones en React Web con una sobrecarga mínima.
Explore los siguientes métodos:
push(location)replace(location)go(number)goBack()goForward()
Aquí hay un ejemplo de uso, con Redux-Thunk :
./actioncreators.js
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
./viewcomponent.js
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>