reactjs - from - react router ejemplo

¿Cómo obtener el historial en react-router v4?

Question

Tengo un pequeño problema al migrar de React-Router v3 a v4. en v3 pude hacer esto en cualquier lugar:

import { browserHistory } from ''react-router'';
browserHistory.push(''/some/path'');

¿Cómo logro esto en v4?

Sé que podría usar, el hoc withRouter , el contexto de reacción o los accesorios del enrutador de eventos cuando estás en un Componente. Pero no es el caso para mí.

Estoy buscando la equivalencia de NavigatingOutsideOfComponents en v4

Answer 1

¡Esto funciona! https://reacttraining.com/react-router/web/api/withRouter

import { withRouter } from ''react-router-dom'';
class MyComponent extends React.Component {
render () {
this.props.history;
}
}
withRouter(MyComponent);

Answer 2

De manera similar a la respuesta aceptada, lo que puede hacer es usar el react-router react y react-router sí para proporcionarle un objeto de history que puede examinar en un archivo y luego exportar.

history.js

import React from ''react'';
import { withRouter } from ''react-router'';
// variable which will point to react-router history
let globalHistory = null;
// component which we will mount on top of the app
class Spy extends React.Component {
componentWillMount() {
const { history } = this.props;
globalHistory = history;
}
componentWillReceiveProps(nextProps) {
globalHistory = nextProps.history;
}
render(){
return null;
}
}
export const GlobalHistory = withRouter(Spy);
// export react-router history
export default function getHistory() {
return globalHistory;
}

Luego importa Importar componente y montar para inicializar la variable de historial:

import { BrowserRouter } from ''react-router-dom'';
import { GlobalHistory } from ''./history'';
function render() {
ReactDOM.render(
<BrowserRouter>
<div>
<GlobalHistory />
//.....
</div>
</BrowserRouter>
document.getElementById(''app''),
);
}

Y luego puede importar en su aplicación cuando se ha montado:

import getHistory from ''./history'';
export const goToPage = () => (dispatch) => {
dispatch({ type: GO_TO_SUCCESS_PAGE });
getHistory().push(''/success''); // at this point component probably has been mounted and we can safely get `history`
};

Incluso hice un paquete npm que hace exactamente eso.

Answer 3

En el caso específico de react-router , el uso del context es un escenario de caso válido, p. Ej.

class MyComponent extends React.Component {
props: PropsType;
static contextTypes = {
router: PropTypes.object
};
render () {
this.context.router;
}
}

Puede acceder a una instancia del historial a través del contexto del enrutador, por ejemplo, this.context.router.history .

Answer 4

Si está usando redux y redux-thunk, la mejor solución será usar react-router-redux

// then, in redux actions for example
import { push } from ''react-router-redux''
dispatch(push(''/some/path''))

Es importante ver los documentos para hacer algunas configuraciones.

Answer 5

Solo necesita tener un módulo que exporte un objeto de history . Luego importarías ese objeto a lo largo de tu proyecto.

// history.js
import { createBrowserHistory } from ''history''
export default createBrowserHistory({
/* pass a configuration object here if needed */
})

Luego, en lugar de usar uno de los enrutadores integrados, usaría el componente <Router> .

// index.js
import { Router } from ''react-router-dom''
import history from ''./history''
import App from ''./App''
ReactDOM.render((
<Router history={history}>
<App />
</Router>
), holder)

// some-other-file.js
import history from ''./history''
history.push(''/go-here'')