Link-Optionen

Möglicherweise möchten Sie Optionen wiederverwenden, die für die Übergabe an Link, redirect oder navigate bestimmt sind. In diesem Fall entscheiden Sie sich möglicherweise dafür, dass ein Objekt-Literal ein guter Weg ist, um 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 abgeleitet, der standardmäßig zu jeder Route aufgelöst wird, wenn er 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überprüfer besteht, bis es in Link aufgeteilt wird. Wir können sehr leicht falsche Navigationsoptionen erstellen und erst dann wissen, dass ein Typfehler vorliegt, wenn die Optionen in Link aufgeteilt werden.

Verwenden der `linkOptions`-Funktion zum Erstellen wiederverwendbarer Optionen

linkOptions ist eine Funktion, die ein Objekt-Literal typüberprüft und die abgeleitete 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 Typüberprü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

Wenn Sie Navigation erstellen, durchlaufen Sie möglicherweise ein Array, um eine Navigationsleiste zu erstellen. In diesem Fall kann linkOptions verwendet werden, um ein Array von Objekt-Literalen zu typüberprüfen, 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 abgeleitet und zurückgegeben, wie anhand der Verwendung von label gezeigt, da dies nicht in den Link-Props vorhanden ist

Verwenden der `linkOptions`-Funktion zum Erstellen wiederverwendbarer Optionen

Ein Array von linkOptions

Bytes abonnieren

Bytes abonnieren

Link-Optionen

Verwenden der linkOptions-Funktion zum Erstellen wiederverwendbarer Optionen

Ein Array von linkOptions

Bytes abonnieren

Bytes abonnieren

Verwenden der `linkOptions`-Funktion zum Erstellen wiederverwendbarer Optionen