Conditional rendering routes

[szilagyi-sandor]

Is it ok to conditional render routes? I want to achieve a different layout with different routes to logged in users and visitors.

[mfpopa]

What I normally do is setup 2 different routers, one for authenticated users, one for visitors.

function AppRouter() {
  const { user } = useAuth();

  if (user.isLoggedIn) {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path='/' component={UserHome} />
          <Route path='/profile' component={UserProfile} />
          ...
        </Switch>
      </BrowserRouter>
    )
  }
  
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/login' component={LoginPage} />
        <Route path='/signup' component={SignUpPage} />
        <Route path='/forgot' component={ForgotPasswordPage} />
      </Switch>
    </BrowserRouter>
  )
}

The useAuth hook handles the logic used to determine if the user is a visitor or an authenticated user.