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
Solo necesita tener un módulo que exporte un objeto de history . 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 */ }) Luego, en lugar de usar uno de los enrutadores incorporados, 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')¡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);Basándose en esta respuesta , si necesita un objeto de historial solo para navegar a otro componente:
import { useHistory } from "react-router-dom"; function HomeButton() { const history = useHistory(); function handleClick() { history.push("/home"); } return ( <button type="button" onClick={handleClick}> Go home </button> ); }