history.push only updates the URL when using BrowserRouter in react application

Question

I know this issue has been discussed before. But, somehow I cannot get it work in my application.

Normally, the navigation works fine between components. However, history.push only changes the url but does not update the content. For example, in the Login page, I want to navigate user to Home page if already logged in. But, the code only updates the url. Any ideas?

const Login = () => {

    useEffect(() => {
        if (authenticationService.currentUserValue != null) {
            history.push('/home');
        }
    }, [])

    //other code
}

In index.js, I have the following

<BrowserRouter basename={baseUrl} history={history}>
    <Provider store={store}>
        <App />
    </Provider>
</BrowserRouter >,

In app.js, I have:

<Layout>
    <Switch>
        <PrivateRoute exact path="/home" component={withRouter(Home)} />
        <Route exact path='/home' component={withRouter(Home)} />
        <Route exact path='/login' component={Login} />
        <Route exact path='/register' component={withRouter(Register)} />
    </Switch>
</Layout>

Try rendering your App component as a default Route. Also you don't need to use withRouter with components — Shubham Khatri
– Shubham Khatri, Commented May 2, 2019 at 17:21
@ShubhamKhatri thanks for the comment. Could you please help me understand what does it mean rendering your App component as a default Route? — renakre
– renakre, Commented May 2, 2019 at 17:24
changing BrowserRouter to Router solves the problem. But, what if I want to use BrowserRouter? Or should I? — renakre
– renakre, Commented May 2, 2019 at 18:16

Shubham Khatri · Accepted Answer · 2019-05-02 18:38:52Z

1

The issue in your case is that you are using a custom history with BrowserRouter which isn't correct. BrowserRouter uses its own history and you must use that to change pages

const Login = ({history}) => {

    useEffect(() => {
        if (authenticationService.currentUserValue != null) {
            history.push('/home');
        }
    }, [])

    //other code
}

If you have used custom history for a reason, then you need to use Router with a custom history prop

<Router basename={baseUrl} history={history}>
    <Provider store={store}>
        <App />
    </Provider>
</Router >

answered May 2, 2019 at 18:38

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

history.push only updates the URL when using BrowserRouter in react application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related