[React Router v6] Nested Routes에 대해 알아보자

React Router v6에서 Nested Routes 활용하는 방법을 알아보자

 

라우터에 경로를 중첩하여 작성한다. 

function Router() {
  return (
    <Routes>
      <Route path="invoices" element={<Invoices />}>
        <Route path=":invoiceId" element={<Invoice />} />
        <Route path="sent" element={<SentInvoices />} />
      </Route>
    </Routes>
  );
}

export default Router;

이 때 자식은 부모를 상속하며 경로는 다음 세 가지이다.

• /invoices
• /invoices/:invoicesId

<App>
  <Invoices>
    <Invoice />
  </Invoices>
</App>

• /invoices/sent

<App>
  <Invoices>
    <SentInvoices />
  </Invoices>
</App>

부모 element 안에 `<Outlet>`을 통해 자식이 render될 곳을 지정한다.

function Invoices() {
  return (
    <div>
      <h1>Invoices</h1>
      <Outlet />
    </div>
  );
} 

function Invoice() {
  let { invoiceId } = useParams();
  return <h1>Invoice {invoiceId}</h1>;
}

function SentInvoices() {
  return <h1>Sent Invoices</h1>;
}

 

이렇게 해서 react-router v6에서 중첩 라우팅 완성!

 

 

참고자료

https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

https://ui.dev/react-router-nested-routes/