반응 라우터 v6에서 404 리디렉션을 구현하는 방법

새로운 React 라우터 v6의 페이지 리디렉션은 까다로울 수 있습니다.

다음과 같은 경로가 있다고 가정해 보겠습니다.

<Router>
  <Routes>
    <Route path="home" element={<Home />} />
    <Route path="profile" element={<Profile />} />
  </Routes>
</Router>

그러나 이는 /home 또는 /todo 로 이동하면 경로가 렌더링되지 않음을 의미합니다.

이것은 404 페이지의 전형적인 사용 사례입니다.

404 페이지 추가

<Router>
  <Routes>
    <Route path="home" element={<Home />} />
    <Route path="profile" element={<Profile />} />
    <Route path="*" element={<Page404 />} />
  </Routes>
</Router>

이 예에서 반응 라우터는 사용자가 잘못된 URL을 입력하려고 하면 404 페이지로 폴백합니다.

"*"는 이전 경로에서 포착되지 않은 모든 경로를 포착합니다.

따라서 404 페이지는 렌더링할 마지막 경로여야 합니다.

페이지 리디렉션 추가

기본 홈 디렉터리에 대한 리디렉션을 추가하여 코드를 더욱 개선할 수 있습니다.

이 방법으로 사용자는/home 또는/(그를 홈으로 리디렉션함)으로 이동하여 홈 페이지에 액세스할 수 있습니다.

<Router>
  <Routes>
    <Route path="home" element={<Home />} />
    <Route path="profile" element={<Profile />} />
    <Route index element={<Navigate to="/home" />} />
    <Route path="*" element={<Page404 />} />
  </Routes>
</Router>

이 자습서가 마음에 들면 고품질 프로그래밍 과정을 제공하는 내 웹 사이트Code with Vlad를 방문하십시오.