리다이렉트 라우트 사용하기

이전 장에서 AuthenticatedRoute와 UnauthenticatedRoute를 만들었으니, 이제 보안이 필요한 컨테이너에 적용해 보겠습니다.

Change indicator 먼저 새로운 리다이렉트 라우트로 전환합니다.

src/Routes.tsx에 있는 다음 라우트들이 영향을 받습니다.

<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/settings" element={<Settings />} />
<Route path="/notes/new" element={<NewNote />} />
<Route path="/notes/:id" element={<Notes />} />

Change indicator 이제 다음과 같이 변경됩니다:

<Route
  path="/login"
  element={
    <UnauthenticatedRoute>
      <Login />
    </UnauthenticatedRoute>
  }
/>
<Route
  path="/signup"
  element={
    <UnauthenticatedRoute>
      <Signup />
    </UnauthenticatedRoute>
  }
/>
<Route
  path="/settings"
  element={
    <AuthenticatedRoute>
      <Settings />
    </AuthenticatedRoute>
  }
/>
<Route
  path="/notes/new"
  element={
    <AuthenticatedRoute>
      <NewNote />
    </AuthenticatedRoute>
  }
/>

<Route
  path="/notes/:id"
  element={
    <AuthenticatedRoute>
      <Notes />
    </AuthenticatedRoute>
  }
/>

Change indicator 그런 다음 src/Routes.tsx의 헤더 부분에서 이들을 임포트합니다.

import AuthenticatedRoute from "./components/AuthenticatedRoute.tsx";
import UnauthenticatedRoute from "./components/UnauthenticatedRoute.tsx";

이제 로그인하지 않은 상태에서 노트 페이지를 로드하려고 하면, 노트 페이지를 참조하여 로그인 페이지로 리다이렉트됩니다.

노트 페이지에서 로그인 페이지로 리다이렉트된 스크린샷

다음으로, 로그인 후 노트 페이지로 리다이렉트하기 위해 이 참조를 사용할 것입니다.