自定义链接

虽然在许多情况下重复是可接受的，但您可能会发现自己做得太多了。有时，您可能希望创建具有附加行为或样式的横切组件。您还可以考虑将第三方库与 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.

createLink 用于横切关注点

基本示例

createLink 与第三方库集成

一些库的示例

订阅 Bytes

订阅 Bytes