Link 옵션

Link, redirect 또는 navigate에 전달할 옵션을 재사용하고 싶을 수 있습니다. 이 경우 Link에 전달할 옵션을 객체 리터럴로 나타내는 방법을 선택할 수 있습니다.

const dashboardLinkOptions = {
  to: '/dashboard',
  search: { search: '' },
}

function DashboardComponent() {
  return <Link {...dashboardLinkOptions} />
}

여기에는 몇 가지 문제가 있습니다. dashboardLinkOptions.to는 string으로 추론되므로 Link, navigate 또는 redirect에 전달하면 기본적으로 모든 라우트로 해석됩니다(이 문제는 as const로 해결할 수 있습니다). 또 다른 문제는 dashboardLinkOptions를 Link에 전개하기 전까지 타입 검사기를 통과하는지 알 수 없다는 점입니다. 잘못된 내비게이션 옵션을 쉽게 만들 수 있고, 옵션을 Link에 전개할 때가 되어서야 타입 오류가 있음을 알게 됩니다.

재사용 가능한 옵션을 만드는 linkOptions 함수 사용

linkOptions는 객체 리터럴을 타입 검사한 후 추론된 입력을 그대로 반환하는 함수입니다. 이를 사용하면 Link와 동일하게 옵션을 사용하기 전에 타입 안전성을 확보할 수 있어 유지 관리와 재사용이 쉬워집니다. 위 예시에 linkOptions를 사용하면 다음과 같습니다.

const dashboardLinkOptions = linkOptions({
  to: '/dashboard',
  search: { search: '' },
})

function DashboardComponent() {
  return <Link {...dashboardLinkOptions} />
}

이렇게 하면 dashboardLinkOptions를 즉시 타입 검사할 수 있으며, 이후 어디서든 재사용할 수 있습니다.

const dashboardLinkOptions = linkOptions({
  to: '/dashboard',
  search: { search: '' },
})

export const Route = createFileRoute('/dashboard')({
  component: DashboardComponent,
  validateSearch: (input) => ({ search: input.search }),
  beforeLoad: () => {
    // can used in redirect
    throw redirect(dashboardLinkOptions)
  },
})

function DashboardComponent() {
  const navigate = useNavigate()

  return (
    <div>
      {/** can be used in navigate */}
      <button onClick={() => navigate(dashboardLinkOptions)} />

      {/** can be used in Link */}
      <Link {...dashboardLinkOptions} />
    </div>
  )
}

linkOptions 배열

내비게이션을 만들 때 배열을 순회해 내비게이션 바를 구성할 수 있습니다. 이 경우 linkOptions를 사용해 Link props에 사용할 객체 리터럴 배열을 타입 검사할 수 있습니다.

const options = linkOptions([
  {
    to: '/dashboard',
    label: 'Summary',
    activeOptions: { exact: true },
  },
  {
    to: '/dashboard/invoices',
    label: 'Invoices',
  },
  {
    to: '/dashboard/users',
    label: 'Users',
  },
])

function DashboardComponent() {
  return (
    <>
      <div className="flex items-center border-b">
        <h2 className="text-xl p-2">Dashboard</h2>
      </div>

      <div className="flex flex-wrap divide-x">
        {options.map((option) => {
          return (
            <Link
              {...option}
              key={option.to}
              activeProps={{ className: `font-bold` }}
              className="p-2"
            >
              {option.label}
            </Link>
          )
        })}
      </div>
      <hr />

      <Outlet />
    </>
  )
}

linkOptions의 입력은 추론되어 반환됩니다. label이 Link props에 존재하지 않는데도 사용할 수 있는 것이 그 예입니다.