When using history.push() my component does not render, you need to re-load the page to render

Question

I’m using React-router-dom to work with routes in an React application.

I have a file called Approuter.js that has my routes:

const AppRouter = props => {

    const loading = useSelector(state => state.loadingStates)
    return (
        <Router>
            <Switch>
                <div>
                    <Route exact path="/">
                        <Redirect
                            to={{
                                pathname: "/login",
                            }}
                        />
                    </Route>
                    <Route path="/home" component={Home} />
                    <Route path="/registrar" component={LoginWrapper} />
                    <Route path="/login" component={LoginWrapper} />
                </div>
            </Switch>
        </Router>
    );
}

export default AppRouter

My index.js file renders this route file:

ReactDOM.render(
    <Provider store={store}>
            <AppRouter/>
    </Provider>, document.getElementById('root'));

So when I go to the localhost:3333 url I get redirected to the login screen. When I’m on the login screen and log in, I call a history.push('/home'):

function* makeLogin(action) {
    yield put(allActions.loadingActions.startLoading());
    try {    
        const { data } = yield call(api.post, '/login', action.payload);
        yield put(allActions.loginActions.setUser(data))
        yield put(allActions.loadingActions.endLoading());
        localStorage.setItem('currentUser', JSON.stringify(data))
        history.push('/home')
    } catch (e) {
        console.log(e)
    }
}

The url in my browser is updated to localhost:3333/home but the login screen is still shown, it is necessary to perform a page re-load for the component to render.

This is my history.js file that is imported by the saga.js file that performs the login request:

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

Answer 1

I was suffering with the same error and in my case the problem is occurring because of the version of history, so I downgrade the version of history and solved the problem.

yarn remove history
yarn add history@^4.10.1