Outlet

react-router-dom에 outlet이라는 속성

로그인하지 않아도 접근가능한 페이지
로그인해야만 접근이 가능한 페이지를 나누고 싶어서 outlet설정을 하였다!

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<NonAuthRouter />}>
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />
        </Route>
        <Route element={<AuthRouter />}>
          <Route path="/" element={<Home />} />
          <Route path="/mypage" element={<MyPage />} />
          <Route path="/letters/:id" element={<Detail />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

로그인하지 않아도 접근할 수 있는 페이지를 NonAuthRouter로 감쌌다.
//NonAuthRouter.js

function NonAuthRouter() {

  const navigate = useNavigate();
  
  useEffect(() => {
    const token = localStorage.getItem("access");
    if (token) {
      navigate(`/`);
    }
  }, [navigate]);
  return <Outlet />;
}

export default NonAuthRouter;

그러면 /login 페이지로 접근하면 NonAuthRouter로 가서 토큰값확인하고 있으면, 메인으로 없으면 그대로 /login으로 접근한다(아울렛에 NonAuthRouter의 하위 라우터가 들어감!)

AuthRouter도 마찬가지!

function AuthRouter() {
  const navigate = useNavigate();

  const [rendered, setRendered] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem("access");
    if (!token) {
      navigate(`/login`);
    }
    setRendered(true);
  }, [navigate]);
  if (!rendered) {
    return null;
  }
  return <Outlet />;
}

export default AuthRouter;

AuthRouter하위에 있는 라우터에 접근하면, 먼저 AuthRouter에 가서 토큰이 있는지 없는지 확인하고 없으면 /login으로 간다.
있다면, 아울렛부분에 하위 라우터들로 대체되기때문에 정상 라우팅이 된다.

PrivateRouter는 너무 어려운 것 같아서.. 이렇게 하는게 좋은 것 같다..