React Router v5: history.push() cambia la barra de direcciones, pero no cambia la página

Estoy tratando de redirigir a un usuario a una nueva página si un inicio de sesión es exitoso en mi aplicación React. La redirección se llama desde el servicio de autenticación que no es un componente. Para acceder al objeto de historial fuera de mi componente, seguí este ejemplo en las preguntas frecuentes de React Router. Sin embargo, cuando llamo history.push('/pageafterlogin'), la página no cambia y permanezco en la página de inicio de sesión (según mi Switchesperanza, esperaría terminar en la 404página). La URL en la barra de direcciones se cambia, /pageafterloginpero la página no cambia desde la página de inicio de sesión. No aparecen errores en la consola ni nada más que indique que mi código no funciona.

¿Cómo puedo history.push()cambiar también la página en la que se encuentra el usuario?

// /src/history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
// /src/App.js
...
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import history from './history';
function App() {
 return (
 <Router history={history}>
 <Switch>
 <Route path="/" exact component={HomePage} />
 <Route path="/login" exact render={() => <FormWrapper><LoginForm /></FormWrapper>} />
 <Route render={() => <h1>404: not found</h1>} />
 </Switch>
 </Router>
 );
}
export default App;
// src/services/auth.service.js
import axios from 'axios';
import history from '../history';
const API_URL = '...';
class AuthService {
 login(username, password) {
 return axios.post(API_URL + 'login', {
 username,
 password
 }).then(res => {
 if (res.status === 200) {
 localStorage.setItem('user', JSON.stringify(res.data));
 history.push('/pageafterlogin');
 }
 });
 }
}

Solución del problema

En lugar de usar BrowserRouter, use Routerfromreact-router-dom

Puedes ver el ejemplo aquí

import { Router, Route, Switch, useHistory, create } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import React from 'react';
const history = createBrowserHistory();
export default function App() {
 return (
 <Router history={history}>
 <Switch>
 <Route path="/" exact component={() => <h1>HomePage</h1>} />
 <Route path="/login" exact component={Login} />
 <Route render={() => <h1>404: not found</h1>} />
 </Switch>
 </Router>
 );
}
function Login() {
 React.useEffect(() => {
 history.push('/pageafterlogin')
 }, [])
 return <h1>Login page</h1>
}