Puede utilizar los métodos de history fuera de sus componentes. Prueba de la siguiente manera.

Primero, cree un objeto de history usando el paquete de historial :

 // src/history.js import { createBrowserHistory } from 'history'; export default createBrowserHistory();

Luego envuélvalo en <Router> ( tenga en cuenta que debe usar import { Router } en lugar de import { BrowserRouter as Router } ):

 // src/index.jsx // ... import { Router, Route, Link } from 'react-router-dom'; import history from './history'; ReactDOM.render( <Provider store={store}> <Router history={history}> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/login">Login</Link></li> </ul> <Route exact path="/" component={HomePage} /> <Route path="/login" component={LoginPage} /> </div> </Router> </Provider>, document.getElementById('root'), );

Cambia tu ubicación actual desde cualquier lugar, por ejemplo:

 // src/actions/userActionCreators.js // ... import history from '../history'; export function login(credentials) { return function (dispatch) { return loginRemotely(credentials) .then((response) => { // ... history.push('/'); }); }; }

UPD : también puede ver un ejemplo ligeramente diferente en las preguntas frecuentes de React Router .

React Router v4 es fundamentalmente diferente de v3 (y anterior) y no puede hacer browserHistory.push() como solía hacerlo.

Esta discusión parece relacionada si quieres más información:

• La creación de un nuevo browserHistory no funcionará porque <BrowserRouter> crea su propia instancia de historial y escucha los cambios en eso. Entonces, una instancia diferente cambiará la URL pero no actualizará el <BrowserRouter> .
• browserHistory no está expuesto por react-router en v4, solo en v2.

En su lugar, tiene algunas opciones para hacer esto:

• Use el componente de orden alto withRouter

  En su lugar, debe usar el componente de orden alto withRouter y envolverlo en el componente que pasará al historial. Por ejemplo:

   import React from "react"; import { withRouter } from "react-router-dom"; class MyComponent extends React.Component { ... myFunction() { this.props.history.push("/some/Path"); } ... } export default withRouter(MyComponent);

  Consulte la documentación oficial para obtener más información:

  Puede obtener acceso a las propiedades del objeto de history y la match de <Route> más cercana a través del componente de orden superior withRouter. withRouter volverá a renderizar su componente cada vez que cambie la ruta con los mismos accesorios que <Route> render props: { match, location, history } .

• Usar la API de 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. Úselo solo cuando todo lo demás falla. Aquí hay un ejemplo:

   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); } ... myFunction() { this.context.router.history.push("/some/Path"); } ... }

  Eche un vistazo a la documentación oficial sobre el contexto:

  Si desea que su aplicación sea estable, no use context. Es una API experimental y es probable que se rompa en futuras versiones de React.

  Si insiste en usar el contexto a pesar de estas advertencias, intente aislar su uso del contexto en un área pequeña y evite usar la API de contexto directamente cuando sea posible para que sea más fácil actualizar cuando cambie la API.

Ahora, con react-router v5, puede usar el enlace useHistory de esta manera:

 import { useHistory } from "react-router-dom"; function HomeButton() { let history = useHistory(); function handleClick() { history.push("/home"); } return ( <button type="button" onClick={handleClick}> Go home </button> ); }

lea más en: https://reacttraining.com/react-router/web/api/Hooks/usehistory