Click on the No Name record

URL에 레코드의 ID가 표시된다.

Route config를 다시 보자.

[
  {
    path: "contacts/:contactId",
    element: <Contact />,
  },
];

:contactId 는 URL segent이다.

: (콜론) 은 "dynamic segment"로의 변환을 의미한다.

Dynamic segment는 URL의 포지션 중에서 contact ID와 같이 동적으로 변하는 값이다.

URL의 이러한 값들을 "URL Params" 또는 줄여서 "Params"라고 부른다.

이러한 Params는 loader함수에 params 객체의 키로 전달된다.

예를들어 위의 URL에서의 :contactId 는 params.contactId 로 전달된다.

이러한 params는 ID로 레코드를 찾는 데 가장 많이 사용된다.

Add a loader to the contact page and access data with "useLoaderData"

// 📄src/routes/contact.jsx

import { Form, useLoaderData } from "react-router-dom";
import { getContact } from "../contacts";

export async function loader({ params }) {
  const contact = await getContact(params.contactId);
  return { contact };
}

export default function Contact() {
  const { contact } = useLoaderData();
  // existing code
}

Configure the loader on the route

/* existing code */
import Contact, {
  loader as contactLoader,
} from "./routes/contact";

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

/* existing code */

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