React_NotFound 페이지 만들기

정의되지 않은 페이지에 유저가 접속할 경우 NotFound 페이지를 띄어줍시다.

pages 디렉토리에 NotFound 컴포넌트를 우선 만들어준다.

// pages/NotFound.js
const NotFound = () => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 64,
        position: 'absolute',
        width: '100%',
        height: '100%',
      }}
    >
      Not Found 404
    </div>
  );
};

export default NotFound;

App 컴포넌트에서 그 외 처리되지 않은 모든 경로를 *(wildcard)로 표시할 수 있다.
기획되지 않은 나머지 경로는 다 NotFound 페이지를 렌더링하도록 했다.

import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Articles from './pages/Articles';
import Article from './pages/Article';
import Layout from './Layout';
import NotFound from './pages/NotFound';

const App = () => {
  return (
    <Routes>
      <Route element={<Layout />}>
        {/* <Route path='/' element={<Home />} /> */}
        <Route index element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/profiles/:username' element={<Profile />} />
      </Route>
      {/* Routing 중첩 */}
      <Route path='/articles' element={<Articles />}>
        <Route path='/articles/:id' element={<Article />} />
      </Route>
      {/* 그 외 모든 경로에는 NotFound 표시할 것 */}
      <Route path='*' element={<NotFound />} />
    </Routes>
  );
};

export default App;