<React> Routing 상대경로와 절대경로, <Link> relative 속성이란?, 인덱스 라우트란?

먼저 이해 하고 넘어가야 하는 내용

웹사이트를 방문하면 일반적으로 도메인 이름 뒤에 경로를 붙혀져있는 것을 볼 수 있습니다. /home 처럼 말이죠.

/home 경로에 있으면, 웹사이트의 home에 해당하는 페이지를 로딩합니다.
동일한 개념으로 /login 경로에 있으면, 웹사이트의 login 페이지를 로딩합니다.

경로에 따라 보이는 웹사이트 컨텐츠가 다른데, 이 경로를 처리하는 것이 Routing이 하는 일입니다.

절대 경로

/로 시작하는 path들은 모두 절대경로입니다.
항상 도메인 이름 뒤에서부터 나타나기 때문입니다.

// Root.js
import React from "react";
import { Outlet } from "react-router-dom";
import MainNavigation from "../components/MainNavigation";

const Root = () => {
  return (
    <>
      <MainNavigation />
      <main>
        {/* 자녀 라우트의 콘텐츠를 렌더링해야 하는 곳을 정의 */}
        <Outlet />
      </main>
    </>
  );
};

export default Root;

----------------------------------------------------------


// App.js
const router = createBrowserRouter([
  {
    path: "/", // 부모 루트
    element: <Root />,
    errorElement: <Error />,
    children: [
      { path: "/", element: <Home /> }, // 현재 '/'루트 이면 해당 엘리먼트를 보여줍니다.
      { path: "/product", element: <Product /> }, // 부모 루트의 자식 루트
      { path: "/product/:productId", element: <ProductDetail /> }, // :은 해당 경로가 유동적으로 해당 값을 가져와서 다이나믹하게 바뀔 수 있음을 의미합니다.
    ],
  },
  {
    path: "/admin",
    element: <AdminRoot />,
    errorElement: <Error />,
    children: [
      { path: "/admin/my", element: <Admin /> },
      { path: "/admin/User", element: <AdminUser /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

상대 경로

/가 없는 path들은 상대경로입니다.
children에 정의된 path들은 단순히 부모 path /root 뒤에 붙혀지는 것을 의미합니다.

const router = createBrowserRouter([
  {
    path: "/", // 부모 루트
    element: <Root />,
    errorElement: <Error />,
    children: [
      { path: "", element: <Home /> }, // 현재 '/'루트 이면 해당 엘리먼트를 보여줍니다.
      { path: "product", element: <Product /> }, // 부모 루트의 자식 루트
      { path: "product/:productId", element: <ProductDetail /> }, // :은 해당 경로가 유동적으로 해당 값을 가져와서 다이나믹하게 바뀔 수 있음을 의미합니다.
    ],
  },
  {
    path: "/admin",
    element: <AdminRoot />,
    errorElement: <Error />,
    children: [
      { path: "/admin/my", element: <Admin /> },
      { path: "/admin/User", element: <AdminUser /> },
    ],
  },
]);

Link 컴포넌트에 적용할 수 있는 relative 속성

<Link>컴포넌트 속성 중 하나인 relative는 적용할 수 있는 옵션이 path, route 두 가지가 있다.

예시 상황으로 특정 페이지에서 뒤로가기 버튼을 구현한다고 해보자.

relative 기본값은 route로 설정되어 있는데, 이것을 path로 설정하게 되면

해당 경로에서 한 세그먼트만 제거하게 되어 바로 전 페이지로 갈 수 있음.

const ProductDetail = () => {
  // params 객체는 라우트 정의에서 속성으로 정의한 모든 다이나믹 경로 세그먼트가 담긴 JS 객체 데이터입니다.
  const params = useParams();
  
  return (
    <>
      <h1>제품 상세페이지</h1>
      <p>{params.productId}</p>
      <p>
      ✅ <Link to=".." relative="path"> // ..은 뒤로가기
          Back
        </Link>
      </p>
    </>
  );
};

relative의 기본값인 route를 사용하게 되면, 전 페이지가 아닌 즉각적으로 부모의 경로로 이동하게 된다.

relative 속성은 상대 경로와 절대 경로를 다룰 때 항상 기억해둬야 할 중요한 특징이다.
절대 경로를 지정했을 때는 상관없지만, 상대 경로를 사용하는 상황일 때는 예시코드처럼 relative 속성을 꼭 지정해주어 React-route의 작동을 제어하는 것이 좋다.

절대경로와 상대경로 요약

path에 /가 포함되어있으면 절대경로
path에 /가 미포함되어있으면 상대경로

<Link to={`/product/${product.id}`}> // 절대 경로
<Link to={`product/${product.id}`}> // 상대 경로

인덱스 라우트란?

부모 라우트가 현재 활성이면 표시되어야 하는 기본 route가 해당 route라는 것을 의미합니다.

아래 코드에서는 /가 활성 상태이면 children에 있는 <Home/> element를 반환합니다.

즉, 인덱스 라우트는 부모 라우트가 활성일 경우에 로딩되어야 하는 기본 라우트를 정의할 수 있게 해줍니다.

const router = createBrowserRouter([
{
  path: "/", // 부모 루트
  element: <Root />,
  errorElement: <Error />,
  children: [
✅ // { path: "", element: <Home /> },
✅    { index: true, element: <Home /> }, // 인덱스 라우트 사용. === path : ""
    { path: "product", element: <Product /> },
    { path: "product/:productId", element: <ProductDetail /> },
  ],
},
{
  path: "/admin",
  element: <AdminRoot />,
  errorElement: <Error />,
  children: [
    { path: "/admin/my", element: <Admin /> },
    { path: "/admin/User", element: <AdminUser /> },
  ],
},
]);