链接选项

您可能希望重用打算传递给 Link、redirect 或 navigate 的选项。在这种情况下，您可能会认为一个对象字面量是表示传递给 Link 的选项的好方法。

tsx

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

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

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 的示例如下所示：

tsx

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

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

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

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

这允许对 dashboardLinkOptions 进行早期类型检查，然后可以在任何地方重用它。

tsx

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>
  )
}

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 属性。

tsx

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 />
    </>
  )
}

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 />
    </>
  )
}

如使用 label（此属性在 Link 属性上不存在）所示，linkOptions 的输入会被推断并返回。

使用 linkOptions 函数创建可重用的选项

`linkOptions` 的数组

订阅 Bytes

订阅 Bytes

链接选项

使用 linkOptions 函数创建可重用的选项

linkOptions 的数组

订阅 Bytes

订阅 Bytes

`linkOptions` 的数组