Вложенные и защищенные маршруты в React Router (v6)

Реагирующий маршрутизатор (v6)

Вложенные и защищенные маршруты в React Router (v6)

Вложенные маршруты

Вложенные маршруты — мощная функция. Хотя большинство людей думают, что React Router только перенаправляет пользователя со страницы на страницу, он также позволяет обмениваться определенными фрагментами представления на основе текущего маршрута

<Routes>
      <Route path="/" element={<Navigate to="/posts" />} />
      <Route path='auth/*' >
        <Route path='login' element={<Login />} />
        <Route path='register' element={<SignUp />} />
 </Route>

Защищенные маршруты

Защищенные маршруты — это маршруты, которые предоставляют доступ только авторизованным пользователям. Это означает, что пользователи должны сначала выполнить определенные условия, прежде чем получить доступ к этому конкретному маршруту. Например, ваше приложение может требовать, чтобы только зарегистрированные пользователи могли посещать страницу панели инструментов.

<Routes>
      <Route path="/" element={<Navigate to="/posts" />} />
      <Route path='auth/*' >
        <Route path='login' element={<Login />} />
        <Route path='register' element={<SignUp />} />
      </Route>
      <Route path='posts/*' >
        <Route path='' element={
          <RequireAuth>
            <Posts />
          </RequireAuth>
        } />
        <Route path=':id' element={<RequireAuth>
          <Post />
        </RequireAuth>} />
      </Route>
</Routes>
function RequireAuth({ children, redirectTo }: any) {
  const {pathname} =useLocation();
  const { token } = useAppSelector((state: any) => state.authState);
  return token ? children : <Navigate to={'/auth/login'} state={pathname} />;
}