Как организовать авторизованные маршруты реагирования?

Question

Как правильно организовать индексные маршруты, если вы перенаправляете или показываете целевую страницу?Это выглядит грязно:

<Switch>
    <Route
      path="/"
      exact
      render={() => (!isLogged ? <Landing /> : <Redirect to="/dashboard" />)}
    />

Вы также можете обернуть это в операторы if-else.

if (!isLogged) {  
   routes = (
   <Route path="/" component={Landing} />
     ....
  )  
} else {
 routes = (
  <Route path="/" render={() => <Redirect to="/dashboard"} />
  .....
  )
}

но это также кажется грязным ... какие-нибудь решения есть?

Answer 1

Можно использовать компонент-оболочку, который возвращает <Route />, если пользователь вошел в систему, или компонент посадки, если нет.

const LoggedInRoute = (props) => {
   if(!isLoggedIn) {
      return <Landing />
   }
   return <Route {...props} />
}

Использование:

<LoggedInRoute 
   path="/"
   exact
   render={() => <Redirect to="/dashboard" />}
 />