원하는 페이지에서만 nav와 footer 라우팅 및 잘못된 경로는 404 페이지 라우팅하기

이번 홈페이지에서는 nav와 footer가 모든 화면에서 다 보여지고 있어서 다른 설정을 해주지 않아도 되었는데

404페이지를 만들자는 의견이 나오면서 라우팅을 손을 봐주어야했다.

 

404페이지 path

404페이지는 정해지지 않은 path를 입력하는 경우 무조건 떠야하기 때문에 아주 간단하게 path에 *를 입력해주면 된다.

근데 이렇게만 코드를 넣어주니 nav와 footer가 같이 보이거나 에러가 나는 상황이 생겼다.

  <Route path="*" element={<NotFound />} />

 

react-router-dom 의 outlet

그래서 알게 된 방법이 컴포넌트를 분리해 라우팅을 해주면 되는 것이었다.

Layout이라는 컴포넌트 안에서 Nav와 Footer를 불러오고 그에 따라 달라져야하는 부분을 Outlet으로 처리해주었다.

const Layout = () => {
  return (
    <>
      <Nav />
      <Outlet />
      <Footer />
    </>
  );
};

 

Route 수정

이후 Router 컴포넌트로 다시 가서 <Routes>안에 첫번째 <Route>에는 nav, footer가 들어있는 layout을 불러온다.

이 <Route> 안에 들어가는 페이지에는 nav와 footer가 보일 것이다.

그리고 layout의 path로 / 를 넣어주었기 때문에 모든 페이지에 / 를 넣어주지 않아도 된다.

그래서 main에는 빈 따옴표를 넣어준다. 이때 main에는 / 를 넣어주면 에러가 나는데 다른 페이지에는 / 를 넣어주어도 괜찮다.

하지만 / 를 넣어주었다면 모두 넣어주고 뺐다면 모두 빼줘 통일성을 가지는 게 좋은 것 같다.

 

두번째 <Route>에는 지정된 path 외의 경로를 입력하면 무조건 나와야하는 404페이지를 불러온다.

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="" element={<Main />} />
          <Route path="login" element={<Login />} />
          <Route path="signUp" element={<SignUp />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

 

막연하게 우리도 404 페이지를 넣자! 라고 했던건데 생각했던것보다 복잡했던 것 같다.

이전에 404페이지는 path에 *만 넣어주면 된다고 들은 얕은 지식이 있어서 정말 *만 넣으면 될 줄 알았다.

Layout 컴포넌트 안에 페이지 들이 들어가면서 자연스럽게 nav와 footer가 보이고

NotFound 페이지는 따로 빼주어 nav와 footer가 보이지 않는다는게 직관적이라고 생각이 들었다.

여태 내가 배운 route는 정말 기초의 기초의 기초라는 생각이 들었고 좀 더 공부해봐야겠다고 느꼈다.