How to optimize ranting?

There is code:
<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>

Tell me how to optimize below in each route not to prescribe a condition on the authorization check!
April 7th 20 at 10:56
2 answers
April 7th 20 at 10:58
Solution
Can be something ?
const PrivateRoute = ({ component: Component, ...rest }) => (
 <Route {...rest} render={(props) => (
!service.auth.isAuth
 ? <Component {...props} />
 : <Redirect to='/' />
 )} />
)


<PrivateRoute path='/info' component={InfoPage} />
April 7th 20 at 11:00
I would put the check of the ranting and put them in some useEffect in one of the root components, like App or AuthProvider.

Find more questions by tags React