Solución:
Solo necesita tener un módulo que exporte un history
objeto. Luego, importaría ese objeto a lo largo de su proyecto.
// history.js
import { createBrowserHistory } from 'history'
export default createBrowserHistory({
/* pass a configuration object here if needed */
})
Entonces, en lugar de usar uno de los enrutadores integrados, usaría el <Router>
componente.
// 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')
¡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);
Similar a la respuesta aceptada, lo que podría hacer es usar react
y react-router
sí mismo para proporcionarte history
objeto que puede incluir 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 {
constructor(props) {
super(props)
globalHistory = props.history;
}
componentDidUpdate() {
globalHistory = this.props.history;
}
render(){
return null;
}
}
export const GlobalHistory = withRouter(Spy);
// export react-router history
export default function getHistory() {
return globalHistory;
}
Luego, importa el Componente y lo monta para inicializar la variable del 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 haya 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 precisamente eso.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)