[TIL]React/Typescript Router를 사용한 간단한 페이지 만들기

오늘 공부한것 & 기억할 내용

1.Router.tsx 코드 작성

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        path: '',
        element: <Author />,
      },
      {
        path: '/author/:name',
        element: <Detail />,
        children: [
          {
            path: ':id',
            element: <Book />,
            errorElement: <NotFound />,
            children: [
              {
                path: 'chapters',
                element: <Chapters />,
              },
              {
                path: 'characters',
                element: <Characters />,
              },
            ],
          },
        ],
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
  },
]);

2.data만들어서 Author페이지 작성

• Link안에 state로 데이터를 보내준다.
  

3.Author.tsx에서 만든 data를 받아서 코드 작성

• useLocation을 사용하여 data를 받아온다.

import { useLocation, useParams, Link, Outlet } from 'react-router-dom';

function Detail() {
  const { name } = useParams();
  const { state } = useLocation();
  return (
    <>
      <h1>{name} Detail Page</h1>
      <ul>
        {state?.books.map((i) => (
          <li key={i.id}>
            <Link to={`/author/${name}/${i.id}`} state={state}>
              Harry Poter{i.id}
            </Link>
          </li>
        ))}
      </ul>
		//children이 있기에 여기서 Outlet작성
      <Outlet />
    </>
  );
}

배운점 & 느낀점

router를 직접 사용하여 children이 여러개인 페이지를 제작해보았는데 생각보다 데이터 전달 하는 부분이 손이 많이 가는거 같이 느껴졌다.
useOutletContext를 사용하여 data를 넘겨도 되지만 Link의 state와 비슷한 양의 코드를 작성하기에 그냥 Link를 사용했는데 조금 더 편안한 방법이 있으면 좋을거 같고 확실히 v6로 사용하니 route작성할때 가독성이 좋아보이는거 같다.