Link-Optionen

Sie möchten möglicherweise Optionen wiederverwenden, die für die Übergabe an Link, redirect oder navigate bestimmt sind. In diesem Fall entscheiden Sie sich möglicherweise, dass ein Objektliteral eine gute Möglichkeit ist, Optionen darzustellen, die an Link übergeben werden.

tsx

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

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

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

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

Hier gibt es ein paar Probleme. dashboardLinkOptions.to wird als string inferiert, was standardmäßig zu jeder Route aufgelöst wird, wenn es an Link, navigate oder redirect übergeben wird (dieses spezielle Problem könnte durch as const behoben werden). Das andere Problem ist, dass wir nicht wissen, ob dashboardLinkOptions den Typ-Check besteht, bis es in Link gespreizt wird. Wir könnten sehr einfach falsche Navigationsoptionen erstellen und erst dann, wenn die Optionen in Link gespreizt werden, wissen wir, dass ein Typfehler vorliegt.

Verwendung der `linkOptions`-Funktion zum Erstellen wiederverwendbarer Optionen

linkOptions ist eine Funktion, die ein Objektliteral typisiert und die inferierte Eingabe unverändert zurückgibt. Dies bietet Typsicherheit für Optionen genau wie bei Link, bevor sie verwendet werden, was eine einfachere Wartung und Wiederverwendbarkeit ermöglicht. Unser obiges Beispiel mit linkOptions sieht so aus

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

Dies ermöglicht eine frühzeitige Typprüfung von dashboardLinkOptions, die dann überall wiederverwendet werden können

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

Ein Array von linkOptions

Beim Erstellen von Navigation möchten Sie möglicherweise über ein Array iterieren, um eine Navigationsleiste zu erstellen. In diesem Fall kann linkOptions verwendet werden, um ein Array von Objektliteralen zu typisieren, die für Link-Props bestimmt sind

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

Die Eingabe von linkOptions wird inferiert und zurückgegeben, wie am Beispiel von label zu sehen ist, da dies nicht in den Link-Props vorhanden ist

Verwendung der `linkOptions`-Funktion zum Erstellen wiederverwendbarer Optionen

Ein Array von linkOptions

Bytes abonnieren

Bytes abonnieren

Link-Optionen

Verwendung der linkOptions-Funktion zum Erstellen wiederverwendbarer Optionen

Ein Array von linkOptions

Bytes abonnieren

Bytes abonnieren

Verwendung der `linkOptions`-Funktion zum Erstellen wiederverwendbarer Optionen