React router updates the URL but the route is not being rendered (works after a manual refresh)

Question

These are my public routes

export const PublicRoutes = () => { return ( <Switch> <Route path="/" exact component={Login} /> <Route path={constant.component.logout.url} exact={true} component={Logout} /> <Route path={constant.component.register.url} exact= {true} component={SignUp} /> <Route path={constant.component.forgotPassword.url} exact={true} component={ForgotPassword} /> </Switch> ) }

This is my index.js

ReactDOM.render( <React.StrictMode> <AlertProvider template={AlertTemplate} {...options}> <Router> <App /> </Router> </AlertProvider> </React.StrictMode>, document.getElementById('root') );

This is my app.js where I am trying to render routes based on accessToken in the local storage

 return ( <> {token ? <DashboardLayout /> : <PublicRoutes />} </> )

And finally this my dashboard layout where I want the authenticated routes to be shown to the right of the sidebar

 <> <SideBar> <div className="w-100"> <Switch> <Route path="/dashboard" component={Dashboard} /> <Route path="/my-account" component={Account} /> </Switch> </div> <Footer> </>

Now, when I login, it redirects me to "/dashboard" the url changes but the page shows an empty screen and it works if I refresh the page manually. What am I doing wrong? Thanks

SniperHerz · Accepted Answer · 2021-10-01 00:29:17Z

1

Are you sure your token is not empty right after you login ? Maybe your token is empty at this moment, PublicRoutes is rendered and that's why the /dashboard route display an empty screen. Maybe your token only gets value after refresh.

answered Oct 1, 2021 at 0:29

SniperHerz

1721 silver badge6 bronze badges

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

3 Comments

Thor0o0 Over a year ago

I tried to log the token. It does not get logged till l refresh the page. I think the token is not getting updated. How do I ensure it does?

SniperHerz Over a year ago

How do you manage you token ? Please share more code about it.

Thor0o0 Over a year ago

You were right, the token was not getting refreshed. What I did was I used context API + reducer to maintain an app state where I am storing the {token, isLoggedIn} and now I am rendering my routes based on isLoggedIn. It works. Thanks for your input.

Collectives™ on Stack Overflow

React router updates the URL but the route is not being rendered (works after a manual refresh)

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related