[React] 리액트 라우터(react-router-dom) 중첩 라우팅으로 하위페이지 연결하기 - nested routing, outlet

 

협업 프로젝트를 진행하면서 다른 개발자 분이 새로운 환경으로 마이그레이션 해주시면서, 리팩토링을 도와주셨다.

그 중 페이지 설계의 중요한 부분인 중첩 라우팅과 관련하여 포스팅 해보려고 한다.

중첩 라우팅이 필요했던 페이지는 LoginPage와 SignupPage였다. 둘 다 비슷한 디자인 content-box 안에서 form 부분만 변경 되고, 각각 로그인 또는 회원가입을 클릭했을 시 해당 Link로 이동하는데, 이 비슷한 content-box를 컴포넌트화 하여 재사용하고 싶었고 이 컴포넌트 안에서 Login, SIgnup의 form 부분만 변경하고 싶었으나 컴포넌트 내에서 이 두 페이지를 연결하는 방법을 몰랐다.

처음에는 중첩 라우팅에 대해서 몰랐기 때문에 같은 디자인까지 포함하여 일일히 LoginPage와 SignupPage를 각각의 페이지를 생성하고 Link 되도록 설정하였는데, FE 개발자분께서 중첩라우팅을 언급해주셔서 새롭게 공부하게 되었다.

 

---

 

중첩 라우팅(nested routing)

1. 비슷한 디자인의 content-box를 재사용하기 위하여 AccountPage 컴포넌트를 생성

AccountPage.jsx

export const AccountPage = () => {
  return (
    <div>
      <div className={styles.accountBox}>
        <Link to='/'>
          <img className={styles.logo} src={HomeLogo} />
        </Link>
      </div>
      {/* <div>hi</div> */}
    </div>
  );
};

컴포넌트 골격과 내부 logo 부분까지의 content-box 디자인은 Login과 Signup 페이지에서 모두 동일하여 AccountPage를 생성하여 재사용 가능하도록 하였고, 이제 페이지 내부에서 하위 페이지를 연결하는 작업이 필요했다.

 

2. App.jsx 컴포넌트에서 중첩 라우팅(nested routing)

중첩라우팅은 생각보다 간단했다. 먼저 <Browser Router>를 사용하는 App 컴포넌트 내부에서 페이지들을 라우팅 할 때,

AccountPage 내부에 중첩 라우팅(nested routing)하여 각각 Route path를 '/account/LoginPage', '/account/signupPage' 로 지정하면 간단하게 중첩라우팅을 사용할 수 있었다.

App.jsx

export const App: React.FC = () => {
  return (
    <RecoilRoot>
      <BrowserRouter>
        <Routes>
          <Route path='/account' element={<AccountPage />}>
            <Route path='/account/login' element={<LoginPage />} />
            <Route path='/account/sign-up' element={<SignupPage />} />
          </Route>
          <Route path='/' element={<HomePage />}>
          	//중첩 라우팅
            <Route path='/notes' element={<NotesPage />} />
            <Route path='/perfume-brand' element={<PerfumeBrandPage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </RecoilRoot>
  );
};

이제 각각 LoginPage와 SignupPage의 주소가 '/account/login', '/account/sign-up'로 설정 되었다.

하지만 여기서 끝이 아니다.

 

3. Outlet 설정

중첩라우팅을 사용할 부모 컴포넌트(AccountPage)에서 자식 라우트 컴포넌트의 위치를 지정해주어야 URL이 정상적으로 작동한다. 

<Outlet/>을 import 하여 부모컴포넌트 내에서 자식 컴포넌트의 라우트할 위치를 지정해 준다.

이 자리에 바로 자식컴포넌트가 위치 할 것이다!

AccountPage.jsx

import { Outlet } from 'react-router-dom';

export const AccountPage = () => {
  return (
    <div>
      <div className={styles.accountBox}>
        <Link to='/'>
          <img className={styles.logo} src={HomeLogo} />
        </Link>
        //자식 컴포넌트의 위치 지정 Outlet 사용
        <Outlet />
      </div>
      {/* <div>hi</div> */}
    </div>
  );
};

이렇게 자식 컴포넌트의 위치까지 설정해 주면, URL이 정상적으로 이동하는 것을 확인할 수 있다.

 

4. 마지막으로 로그인, 회원가입의 Link를 라우터에서 설정한 대로 <Link to='account/login'> 로 설정해 주면 클릭 시 정상적으로 하위페이지로 이동하는 것을 확인할 수 있다.

export const GuestMenu = () => {
  return (
    <ul className={styles.guesetMenu}>
      <li>
        <Link to='account/login'>LOGIN</Link>
      </li>
      <li>
        <Link to='account/sign-up'>회원가입</Link>
      </li>
    </ul>
  );
};

 

이제 해당 로그인, 회원가입 메뉴를 클릭하면 Account페이지의 LoginPage과 SignupPage로 연결된다.