(기록용)매칭되는 주소가 없을때 특정 페이지를 보여주기

프로젝트를 진행하며 404 Not Found와 같이 라우터에 매칭되지 않은 주소로 접속하는 경우 나타낼 페이지를 매칭하려 한다.

 

react-router-dom의 Route의 path 속성에 *을 설정해주어 위에서 개발자가 매칭해둔 주소 이외의 주소로 접근할 때 미리 정해둔 컴포넌트로 라우팅해줄 수 있다.

 

// App.tsx
import HomePage from 'pages/HomePage';
import NotFound from 'pages/NotFound';
import React from 'react';
import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <>
      <Routes>
        {/* 올바르게 매칭된 주소 */}
        <Route path="" element={<HomePage />}></Route>
        {/* 매칭된 주소 이외의 주소에 매칭 */}
        <Route path="*" element={<NotFound/>}></Route>
      </Routes>
    </>
  );
}

export default App;