(React Router) 5. 중첩 라우팅

 

이전 글: https://moneytech.kr/72

(React Router) 4. contact.jsx 생성과 라우팅

 

1. 중첩 라우트의 목표

우리의 중첩 라우트라는 것은 루트 라우트 안에서 화면 라우팅이 되는 것이다.

contact route를 root route 내부의 자식으로 만들어 줍니다.

 

src/main.jsx

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [      // <---- 이 부분으로 작성
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

이 전에 있던 배열에서 요소를 제거하고 첫번째 요소에 맨 마지막에 children을 삽입합니다.

 

이렇게 바꾸면 원래 나오던 부분이 하얀색으로 나오면서 화면이 안나옵니다.

root route에 이제 저 부분의 자식으로 어떤 부분을 그리고 싶은지 명시해주어야 합니다.

 

우리는 이 때 <Outlet>을 사용합니다.

 

Outlet은 부모 라우트에게 어떤 자식 라우트를 그릴지 명시해주는 기능입니다.

https://reactrouter.com/en/main/components/outlet

Outlet v6.6.1

 

 

2. <Outlet>과 자식라우트

src/routes/root.jsx에 가서 아래와 같이 파일을 수정합니다.

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

export default function Root() {
  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        <div>
          <form id="search-form" role="search">
            <inputㅐ
              id="q"
              aria-label="Search contacts"
              placeholder="Search"
              type="search"
              name="q"
            />
            <div id="search-spinner" aria-hidden hidden={true} />
            <div className="sr-only" aria-live="polite"></div>
          </form>
          <form method="post">
            <button type="submit">New</button>
          </form>
        </div>
        <nav>
          <ul>
            <li>
              <a href={`contacts/1`}>Your Name</a>
            </li>
            <li>
              <a href={`contacts/2`}>Your Friend</a>
            </li>
          </ul>
        </nav>
      </div>
      <div id="detail">
        <Outlet />      <------- 이 부분을 추가
      </div>
    </>
  );
}

 

 

그럼 이제 아래와 같이 중첩된 형태로 나오게 된다. (전체 부모 내의 자식이 표기되는 것)

 

고양이 귀욥