React Router

Reference

loader, reactrouter.com
Dynamic Segments, reactrouter.com

React Router

loader

: Each route can define a "loader" function to provide data to the route element before it renders.

loader (function) 랜더링 되기 전 엘리먼트에 데이터를 제공하는 함수이다.

createBrowserRouter([
  {
    element: <Teams />,
    path: "teams",
    loader: async () => {
      return fakeDb.from("teams").select("*");
    },
    children: [
      {
        element: <Team />,
        path: ":teamId",
        loader: async ({ params }) => {
          return fetch(`/api/teams/${params.teamId}.json`);
        },
      },
    ],
  },
]);

params

:Route params are parsed from dynamic segments(아래 개념 참고) and passed to your loader. This is useful for figuring out which resource to load.

Route의 params는 dynamic segments에서 파싱되어 loader로 넘어간다.

Path

Route params are parsed from dynamic segments and passed to your loader. This is useful for figuring out which resource to load:

Dynamic Segments (Route, path의 하위 개념)

: If a path segment starts with : then it becomes a "dynamic segment". When the route matches the URL, the dynamic segment will be parsed from the URL and provided as params to other router APIs.

path segment가 :로 시작하면 "dynamic segment"가 된다. URL에 맞는