Route redirection in REACTJS

Asked

Viewed 10 times

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 !

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.