自定义链接 | TanStack Router Solid Docs

自定义链接

虽然重复自己在许多情况下是可以接受的，但您可能会发现您做得太频繁了。有时，您可能想要创建具有附加行为或样式的横切组件。您也可以考虑将第三方库与 TanStack Router 的类型安全性结合使用。

用于横切关注点的 createLink

createLink 创建一个与 Link 具有相同类型参数的自定义 Link 组件。这意味着您可以创建自己的组件，它提供与 Link 相同的类型安全性和 TypeScript 性能。

基本示例

如果您想创建一个基本的自定义链接组件，可以使用以下方法：

tsx

import * as Solid from 'solid-js'
import { createLink, LinkComponent } from '@tanstack/solid-router'

export const Route = createRootRoute({
  component: RootComponent,
})

type BasicLinkProps = Solid.JSX.IntrinsicElements['a'] & {
  // Add any additional props you want to pass to the anchor element
}

const BasicLinkComponent: Solid.Component<BasicLinkProps> = (props) => (
  <a {...props} class="block px-3 py-2 text-red-700">
    {props.children}
  </a>
)

const CreatedLinkComponent = createLink(BasicLinkComponent)

export const CustomLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
  return <CreatedLinkComponent preload={'intent'} {...props} />
}

import * as Solid from 'solid-js'
import { createLink, LinkComponent } from '@tanstack/solid-router'

export const Route = createRootRoute({
  component: RootComponent,
})

type BasicLinkProps = Solid.JSX.IntrinsicElements['a'] & {
  // Add any additional props you want to pass to the anchor element
}

const BasicLinkComponent: Solid.Component<BasicLinkProps> = (props) => (
  <a {...props} class="block px-3 py-2 text-red-700">
    {props.children}
  </a>
)

const CreatedLinkComponent = createLink(BasicLinkComponent)

export const CustomLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
  return <CreatedLinkComponent preload={'intent'} {...props} />
}

然后您可以像使用任何其他 Link 一样使用您新创建的 Link 组件

tsx

<CustomLink to={'/dashboard/invoices/$invoiceId'} params={{ invoiceId: 0 }} />

<CustomLink to={'/dashboard/invoices/$invoiceId'} params={{ invoiceId: 0 }} />

使用第三方库的 createLink

以下是一些如何将 createLink 与第三方库一起使用的示例。

某个库的示例

tsx

// TODO: Add this example.

// TODO: Add this example.