Why my routes on refreshing the page show nothing?

These are the routes I have defined in the main App.js file. And they're working fine.

<Router>
      <h1>Hello World</h1>
      <Switch>
        <Route exact path='/signup' component={SignUp} />
        <Route exact path='/login' component={Login} />
        <PrivateRoute exact path='/dash' component={Dashboard} />
        <Route exact path='/reset-password' component={ResetPassword} />
        <Route exact path='/password/reset/confirm/:uid/:token' component={ResetPasswordConfirm} />
        <Route exact path='/activate/:uid/:token' component={Activate} />
      </Switch>
    </Router>
    

This is my code for the PrivateRoute.js file. Only if the user is authenticated, they would be allowed to access the Dashboard which is defined by the only PrivateRoute I've defined in App.js, with the route "/dash". Otherwise redirected to the login page.

function PrivateRoute({component:Component,auth,...rest}) {
  
    return (
        <Route 
        {...rest}
        render={props =>{
            if(auth.isAuthenticated){
                return <Component {...props} />
            }
            else if(!auth.isAuthenticated){
                return <Redirect to="login" />
            }
            
            
        }}
        />
    )
}

const mapStateProps = state =>({
    auth: state.auth
})

export default connect(mapStateProps)(PrivateRoute)


These are the routes I have defined in the Dashboard.js file which is only accessible if the user is authenticated.

return (
       <Router> 
        <div className={darkmode?"darkmode":"light"}>

    <Navbar showSidebar={showSidebar} logout_user={logout_user} darkmode={darkmode}/>

    <div className="dashboard">
      <Sidebar sidebar={sidebar}
       logout_user={logout_user}  
       setDarkmode={applyDark}/>
      <Switch>
        <Route path={`${match.path}/sv`} component={Saved} />
        <Route exact path={`${match.path}/scanner`} component={Upload} />
        <Route exact path={`${match.path}/buttons`} component={Buttons}/>
        <Route exact path={`${match.path}/table`} 
        component={() => <Table darkmode={darkmode}/>}/>
        <Route exact path={`${match.path}/cd`}
        component={() => <ClassDiagram darkmode={darkmode}/> }/>

      </Switch>
      </div>
        </div>
      </Router>
    
    )

All the routes are working fine in the Dashboard.js file. But the problem is, every time I refresh the page, all the routes defined in the Dashboard.js file give me a blank screen with only "Hello World"(Hello World are the h1 tags I've defined in the App.js file) on it.

I've added these extra lines in my App.js file so that every time the user refreshes the page, the user still remains on "/dash" route if authenticated.

useEffect(() => {
    checkAuthenticated();
    load_user();
}, []);

The thing is, every time, I refresh the page on "/dash" route, it works fine(not totally fine, for a second "/login" route is loaded and then redirected to the "/dash"). But, for the other routes defined in the Dashboard.js file. I still get a blank white screen with a Hello world on it. I'm new to working with React and its been quite some time I'm stuck with this thing. Please guide.



Read more here: https://stackoverflow.com/questions/67398474/why-my-routes-on-refreshing-the-page-show-nothing

Content Attribution

This content was originally published by RABI SIDDIQUE at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: