Как можно оптимизировать роуты?

Question

[Виктор]

Есть код:

<Switch>         
            <Route path="/login">
              { service.auth.isAuth ? <Redirect to="/" /> : <LoginPage />}  
            </Route>

            <Route path="/registration">
              { service.auth.isAuth ? <Redirect to="/" /> : <RegistrationPage />}
            </Route>  

            <Route exact path={['/', '/info']}>
              { !service.auth.isAuth ? <Redirect to="/login" /> : <InfoPage /> }               
            </Route>
            
            <Route path="/notes" exact>
              { !service.auth.isAuth ? <Redirect to="/login" /> : <NotesPage /> }              
            </Route>

            <Route path="/notes/:id" exact>
              { !service.auth.isAuth ? <Redirect to="/login" /> : <NoteDetails /> }              
            </Route>

            <Route path="/notes/edit/:id">
              { !service.auth.isAuth ? <Redirect to="/login" /> : <NoteEdit /> }             
            </Route>

            <Route path="/goods">
              { !service.auth.isAuth ? <Redirect to="/login" /> : <GoodsPage /> }              
            </Route>

            <Route path="/basket">
              { !service.auth.isAuth ? <Redirect to="/login" /> : <BasketPage /> }              
            </Route>

            <Route path="*">
              { service.auth.isAuth 
                ? <Alert title="Error 404" text="Page not found!" type="danger" />
                : <LoginPage />}                
            </Route>              
          </Switch>

Подскажите как можно оптимизировать чтобы в каждом роуте не прописывать условие на проверку авторизации!

Answer 1

[1programmer]

Может быть типа того ?

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    !service.auth.isAuth
      ? <Component {...props} />
      : <Redirect to='/' />
  )} />
)

<PrivateRoute path='/info' component={InfoPage} />

Answer 2

[Mikhail Osher]

Я бы убрал проверки из роутов, и перенёс их в какой-нибудь useEffect в одном из корневых компонентов, типа App или AuthProvider.