Как реализовать аутентификацию для вложенных маршрутов в React-Router 6?

Question

Я пытаюсь реализовать аутентификацию для своих маршрутов, как этот, с помощью response-router v6

    <BrowserRouter>
      <Routes>
        <Route path="/auth*" element={<Authentication/>}/>
        {isLoggedIn?
          (< Route path="/" element={<Layout />}>
              <Route path="/tags*" element={<Tags />} />
              <Route path="/meditation*" element={<Meditation/>} />
              <Route path="/settings*" element={<Settings/>} />
              <Route path="/yoga*" element={<Yoga/>} />
          </Route>)
          :(<Navigate to={"/auth/login"} replace={true}/> )
        }
      </Routes>
   </BrowserRouter>

Когда я не вошел в систему и пытаюсь go перейти на маршрут «/», он переводит меня в «/ auth / login», как и должно, но когда Я пытаюсь использовать go для вложенных маршрутов, таких как «/ tags» или «/ meditation», это дает мне пустой экран вместо перехода к «/ auth / login». Как я могу реализовать аутентификацию для вложенных маршрутов?

Заранее спасибо.

Answer 1

Нашел решение. Вы создаете компонент с именем PrivateRoute следующим образом:

import React from 'react';
import {Route, Navigate} from 'react-router';


interface Props{
  element:any;
  path:string;
  children?:any;
}

export default function ProtectedRoute({element, path, children}:Props){
  const isLoggedIn = LOGICTOCHECKIFUSERISLOGGEDINORNOT;

  return isLoggedIn?(<Route path={path} element={element}>{children}</Route>): (<Navigate to={"/auth/login"} replace={true}/> )
}

и используйте его так:

<BrowserRouter>
      <Routes>
        <Route path="/auth*" element={<Component1/>}/>
        <ProtectedRoute path="/" element={<Component2 />}>
          <Route path="/path1*" element={<Component3 />} />
          <Route path="/path2*" element={<Component4/>} />
          <Route path="/path3*" element={<Component5/>} />
        </ProtectedRoute>
      </Routes>
 </BrowserRouter>