Benutzerdefinierter Link

Auch wenn Wiederholungen in vielen Situationen akzeptabel sind, stellen Sie möglicherweise fest, dass Sie dies zu oft tun. Manchmal möchten Sie übergreifende Komponenten mit zusätzlichem Verhalten oder Stilen erstellen. Sie könnten auch die Verwendung von Drittanbieterbibliotheken in Kombination mit der Typsicherheit von TanStack Router in Betracht ziehen.

createLink für übergreifende Belange

createLink erstellt eine benutzerdefinierte Link-Komponente mit denselben Typparametern wie Link. Das bedeutet, Sie können Ihre eigene Komponente erstellen, die dieselbe Typsicherheit und TypeScript-Leistung wie Link bietet.

Einfaches Beispiel

Wenn Sie eine einfache benutzerdefinierte Link-Komponente erstellen möchten, können Sie dies mit dem Folgenden tun

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

Sie können Ihre neu erstellte Link-Komponente wie jede andere Link verwenden

tsx

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

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

createLink mit Drittanbieterbibliotheken

Hier sind einige Beispiele, wie Sie createLink mit Drittanbieterbibliotheken verwenden können.

Beispiel für eine Drittanbieterbibliothek

tsx

// TODO: Add this example.

// TODO: Add this example.

createLink für übergreifende Belange

Einfaches Beispiel

createLink mit Drittanbieterbibliotheken

Beispiel für eine Drittanbieterbibliothek

Bytes abonnieren

Bytes abonnieren