중첩 라우팅으로 권한 없는 유저 페이지 접속 막기

중첩 라우팅

• 상위 라우터와 하위 라우터를 동시에 활성화시킬 때 사용

중첩 라우팅을 사용하지 않으면
-> '/'로 접속하면 해당 element 렌더링
-> 'a'로 접속하면 해당 element 렌더링

특정 path => 특정 element 한개가 렌더링 됨

하지만 중첩 라우팅을 하게되면
'/'로 접속 시 -> '/' 엘리먼트만 렌더링
'a'로 접속 시 -> '/'일때의 엘리먼트와 '/a' 일때의 엘리먼트 두개가 렌더링 됨

하지만 무조건 렌더링 되는 것은 아니고, 부모(상위) 라우터의 엘리먼트에서 Outlet을 이용해서 자식(하위)의 위치를 지정해줘야 함

• children 사용하는 것과 동일

  <nav></nav>
  
  <Outlet/> -> 중첩 시 이 위치에 렌더링됨
  
  <footer/>

  상위 라우터에 Outlet을 설정해주게 되면 하위 라우터가 라우팅 되면 저 Outlet 자리에서 렌더링 됨

권한 확인

      <Route element={<Main></Main>}>
        <Route path="/" element={<p>홈페이지</p>} />
        <Route element={<Auth/>}>
          <Route path="/signin" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />} />
        </Route>

    import { Navigate, Outlet } from "react-router-dom";
    const Auth = () => {
  const isAuthenticated = //권한 확인
  return !isAuthenticated ? <Outlet /> : <Navigate to=""/>;
};
export default NoAuthGuard;

홈페이지를 만드는데, 이미 로그인이 되어있는 상태라면 회원가입과 로그인 페이지를 접속하지 못하게 하고 싶음

• '/'로 접속하게 되면,
  이라는 컴포넌트의 Outlet 자리에 해당 element가 렌더링 됨
• /signin과 /signup으로 접속했을 경우 중첩의 중첩 형태이기 때문에,
  컴포넌트가 렌더링 된 후 Outlet 자리에 라는 컴포넌트가 렌더링됨(당연히 '/'의 엘리멘트는 렌더링되지 않음)
• Auth에서 권한 확인
• 접속 권한이 있으면 ? Navigate를 통해 다른 라우터로 이동
• 접속 권한이 없으면 ? Outlet 자리에 SignIn , SignUp 컴포넌트 렌더링

공식 문서가 너무 보기 어렵게 되어있어서 올바른 명칭인지는 모르겠지만... 중첩 라우팅을 통해 중복된 부분들을 한번에 처리하기 용이함