0
I have an React app that has public route (Login), private routes (Dashboard) and sub routes, which are the contents according to menu options.
This is an Aside that holds the menu, and the right side to div Content.
Problem
It turns out that if I am authenticated in the app, inside Dashboard and access the option my profile I am forwarded to the route "my profile". If I update (F5) the screen, I am automatically redirected to the Login screen even if I am authenticated.
App.jsx
const App = () => {
const theme = useSelector((state) => { return state.Theme.newTheme })
return (
<ThemeProvider theme={theme ? ClearMode : DarkMode}>
<GlobalStyle />
<Router>
<Routes />
</Router>
</ThemeProvider>
)
}
export default App
Routes.jsx
export const Routes = () => {
return (
<Switch>
<Route path='/singUp' component={SingUp} />
<PrivateRoute path='/setPassword' component={SetPassword} />
<PrivateRoute path='/dashboard' component={Dashboard} />
<Route exact path='/' component={SingIn} />
<Route path='*' component={NotFound} />
</Switch>
)
Privateroutes.jsx
const PrivateRoute = (props) => {
const authenticated = isAuthtenticated()
return authenticated ? <Route {...props} /> : <Redirect to='/' />
}
export default PrivateRoute
Sub-Rotas
Link
const AsideComponent = () => {
return (
<Aside id='aside'>
<List>
<Link to='/myProfile'>
<Item className='item' onClick={toggleItem}>Meu perfil</Item>
</Link>
</List>
</Aside>
)
}
export default AsideComponent
Content
const Content = () => {
return (
<Main>
<Container>
<Section>
<Switch>
<PrivateRoute path='/myProfile' component={myProfile} />
</Switch>
</Section>
</Container>
</Main>
)
}
export default Content
If it be a trifling doubt, kindly disregard.
Thank you !