URL segment, layouts, data는 서로 분리되어서 주어진다.

각각의 예는 다음과 같다.

• URL Segment :
  • /
  • contacts/:id
• Component :
  • <Root>
  • <Contact>
• Data
  • list of contacts
  • individual contact

React Router는 위의 데이터들을 컴포넌트안에 쉽게 삽입할 수 있도록 해주는 데이터 convention(규칙)이 있다.

데이터를 로드하기 위해 사용하는 2개의 API가 있다.

loader 와 useLoaderData 이다.

먼저 root route에서 loader function을 만들고 export 한다.

그다음 root route에 hook up 한다.

마지막으로 해당 데이터에 액세스 하여 랜더링 한다.

Export a loader from "root.jsx"

// 📄src/routes/root.jsx

import { Outlet, Link } from "react-router-dom";
import { getContacts } from "../contacts";

export async function loader() {
  const contacts = await getContacts();
  return { contacts };
}

Configure the loader on the route

// 📄src/main.jsx

/* other imports */
import Root, { loader as rootLoader } from "./routes/root";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

Access and render the data

// 📄src/routes/root.jsx

import {
  Outlet,
  Link,
  useLoaderData,
} from "react-router-dom";
import { getContacts } from "../contacts";

/* other code */

export default function Root() {
  const { contacts } = useLoaderData();
  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        {/* other code */}

        <nav>
          {contacts.length ? (
            <ul>
              {contacts.map((contact) => (
                <li key={contact.id}>
                  <Link to={`contacts/${contact.id}`}>
                    {contact.first || contact.last ? (
                      <>
                        {contact.first} {contact.last}
                      </>
                    ) : (
                      <i>No Name</i>
                    )}{" "}
                    {contact.favorite && <span>★</span>}
                  </Link>
                </li>
              ))}
            </ul>
          ) : (
            <p>
              <i>No contacts</i>
            </p>
          )}
        </nav>

        {/* other code */}
      </div>
    </>
  );
}

이제 React Router가 해당 데이터를 UI와 동기화된 상태로 자동으로 유지한다.

아직은 데이터가 없기 때문에 위와 같이 빈 리스트가 나타난다.

출처 : 리액트 라우터 공식 홈페이지➡️