Häufig gestellte Fragen

Willkommen bei den TanStack Router FAQs! Hier finden Sie Antworten auf häufig gestellte Fragen zum TanStack Router. Wenn Sie eine Frage haben, die hier nicht beantwortet wird, können Sie diese gerne im TanStack Discord stellen.

Sollte ich meine routeTree.gen.ts Datei in Git committen?

Ja! Obwohl die Route-Tree-Datei (d.h. routeTree.gen.ts) von TanStack Router generiert wird, ist sie im Wesentlichen Teil der Laufzeit Ihrer Anwendung und kein Build-Artefakt. Die Route-Tree-Datei ist ein kritischer Teil des Quellcodes Ihrer Anwendung und wird von TanStack Router verwendet, um die Routen Ihrer Anwendung zur Laufzeit zu erstellen.

Sie sollten diese Datei in Git committen, damit andere Entwickler sie zum Erstellen Ihrer Anwendung verwenden können.

Kann ich die Root-Route-Komponente bedingt rendern?

Nein, die Root-Route wird immer gerendert, da sie der Einstiegspunkt Ihrer Anwendung ist.

Wenn Sie die Komponente einer Route bedingt rendern müssen, bedeutet dies normalerweise, dass der Seiteninhalt je nach Bedingung (z.B. Benutzerauthentifizierung) unterschiedlich sein muss. Für diesen Anwendungsfall sollten Sie eine Layout-Route oder eine Pfadlose Layout-Route verwenden, um den Inhalt bedingt zu rendern.

Sie können den Zugriff auf diese Routen einschränken, indem Sie eine bedingte Prüfung in der beforeLoad Funktion der Route vornehmen.

Wie sieht das aus?
tsx
// src/routes/_pathless-layout.tsx
import { createFileRoute, Outlet } from '@tanstack/solid-router'
import { isAuthenticated } from '../utils/auth'

export const Route = createFileRoute('/_pathless-layout', {
  beforeLoad: async () => {
    // Check if the user is authenticated
    const authed = await isAuthenticated()
    if (!authed) {
      // Redirect the user to the login page
      return '/login'
    }
  },
  component: PathlessLayoutRouteComponent,
  // ...
})

function PathlessLayoutRouteComponent() {
  return (
    <div>
      <h1>You are authed</h1>
      <Outlet />
    </div>
  )
}
// src/routes/_pathless-layout.tsx
import { createFileRoute, Outlet } from '@tanstack/solid-router'
import { isAuthenticated } from '../utils/auth'

export const Route = createFileRoute('/_pathless-layout', {
  beforeLoad: async () => {
    // Check if the user is authenticated
    const authed = await isAuthenticated()
    if (!authed) {
      // Redirect the user to the login page
      return '/login'
    }
  },
  component: PathlessLayoutRouteComponent,
  // ...
})

function PathlessLayoutRouteComponent() {
  return (
    <div>
      <h1>You are authed</h1>
      <Outlet />
    </div>
  )
}
Unsere Partner
Code Rabbit
Netlify
Neon
Clerk
Convex
Sentry
Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.

Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.