自定义链接

自定义链接

尽管在许多情况下重复自己是可以接受的，但您可能会发现自己做得过于频繁。有时，您可能希望创建具有附加行为或样式的横切组件。您可能还会考虑结合 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