Migration von React Location

Bevor Sie mit Ihrer Reise zur Migration von React Location beginnen, ist es wichtig, dass Sie ein gutes Verständnis der Routing-Konzepte und Design-Entscheidungen haben, die von TanStack Router verwendet werden.

Unterschiede zwischen React Location und TanStack Router

React Location und TanStack Router teilen viele der gleichen Design-Entscheidungen und Konzepte, aber es gibt einige wichtige Unterschiede, die Sie beachten sollten.

React Location verwendet Generics, um Typen für Routen abzuleiten, während TanStack Router Module Declaration Merging verwendet, um Typen abzuleiten.
Die Routenkonfiguration in React Location erfolgt über ein einzelnes Array von Routendefinitionen, während in TanStack Router die Routenkonfiguration über einen Baum von Routendefinitionen erfolgt, der mit der Root-Route beginnt.
Dateibasiertes Routing ist die empfohlene Methode zur Definition von Routen in TanStack Router, während React Location Ihnen nur erlaubt, Routen in einer einzigen Datei mit einem codebasierten Ansatz zu definieren.
- TanStack Router unterstützt zwar einen codebasierten Ansatz zur Definition von Routen, dieser wird jedoch für die meisten Anwendungsfälle nicht empfohlen. Sie können hier mehr darüber lesen, warum: Warum ist dateibasiertes Routing die bevorzugte Methode zur Definition von Routen?

Migrationsanleitung

In dieser Anleitung gehen wir den Prozess der Migration des React Location Basic Beispiels zu TanStack Router unter Verwendung von dateibasiertem Routing durch, mit dem Ziel, die gleiche Funktionalität wie im ursprünglichen Beispiel zu erreichen (Styling und anderer nicht-routingbezogener Code wird weggelassen).

Tipp

Um einen codebasierten Ansatz zur Definition Ihrer Routen zu verwenden, können Sie die Anleitung Code-basiertes Routing lesen.

Schritt 1: Wechseln Sie zu den Abhängigkeiten von TanStack Router

Zuerst müssen wir die Abhängigkeiten für TanStack Router installieren. Detaillierte Installationsanweisungen finden Sie in unserer Anleitung So installieren Sie TanStack Router.

npm install @tanstack/react-router @tanstack/router-devtools

npm install @tanstack/react-router @tanstack/router-devtools

Und die React Location-Abhängigkeiten entfernen.

npm uninstall @tanstack/react-location @tanstack/react-location-devtools

npm uninstall @tanstack/react-location @tanstack/react-location-devtools

Schritt 2: Verwenden Sie den Dateisystem-Routing-Watcher

Wenn Ihr Projekt Vite (oder einen der unterstützten Bundler) verwendet, können Sie das TanStack Router-Plugin verwenden, um Änderungen an Ihren Routendateien zu überwachen und die Routenkonfiguration automatisch zu aktualisieren.

Installation des Vite-Plugins

npm install -D @tanstack/router-plugin

npm install -D @tanstack/router-plugin

Und fügen Sie es zu Ihrer vite.config.js hinzu

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'

export default defineConfig({
  // ...
  plugins: [tanstackRouter(), react()],
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'

export default defineConfig({
  // ...
  plugins: [tanstackRouter(), react()],
})

Wenn Ihre Anwendung jedoch kein Vite verwendet, einen unserer anderen unterstützten Bundler verwendet oder Sie das Paket @tanstack/router-cli verwenden, um Änderungen an Ihren Routendateien zu überwachen und die Routenkonfiguration automatisch zu aktualisieren.

Schritt 3: Fügen Sie die dateibasierte Konfigurationsdatei zu Ihrem Projekt hinzu

Erstellen Sie eine Datei tsr.config.json im Stammverzeichnis Ihres Projekts mit folgendem Inhalt

json

{
  "routesDirectory": "./src/routes",
  "generatedRouteTree": "./src/routeTree.gen.ts"
}

{
  "routesDirectory": "./src/routes",
  "generatedRouteTree": "./src/routeTree.gen.ts"
}

Die vollständige Liste der Optionen für die Datei tsr.config.json finden Sie hier.

Schritt 4: Erstellen Sie das Routenverzeichnis

Erstellen Sie ein Verzeichnis routes im Verzeichnis src Ihres Projekts.

mkdir src/routes

mkdir src/routes

Schritt 5: Erstellen Sie die Root-Routendatei

tsx

// src/routes/__root.tsx
import { createRootRoute, Outlet, Link } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => {
    return (
      <>
        <div>
          <Link to="/" activeOptions={{ exact: true }}>
            Home
          </Link>
          <Link to="/posts">Posts</Link>
        </div>
        <hr />
        <Outlet />
        <TanStackRouterDevtools />
      </>
    )
  },
})

// src/routes/__root.tsx
import { createRootRoute, Outlet, Link } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => {
    return (
      <>
        <div>
          <Link to="/" activeOptions={{ exact: true }}>
            Home
          </Link>
          <Link to="/posts">Posts</Link>
        </div>
        <hr />
        <Outlet />
        <TanStackRouterDevtools />
      </>
    )
  },
})

Schritt 6: Erstellen Sie die Index-Routendatei

tsx

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Index,
})

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Index,
})

Sie müssen alle Komponenten und die Logik, die für die Index-Route benötigt werden, aus der Datei src/index.tsx in die Datei src/routes/index.tsx verschieben.

Schritt 7: Erstellen Sie die Posts-Routendatei

tsx

// src/routes/posts.tsx
import { createFileRoute, Link, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  component: Posts,
  loader: async () => {
    const posts = await fetchPosts()
    return {
      posts,
    }
  },
})

function Posts() {
  const { posts } = Route.useLoaderData()
  return (
    <div>
      <nav>
        {posts.map((post) => (
          <Link
            key={post.id}
            to={`/posts/$postId`}
            params={{ postId: post.id }}
          >
            {post.title}
          </Link>
        ))}
      </nav>
      <Outlet />
    </div>
  )
}

// src/routes/posts.tsx
import { createFileRoute, Link, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  component: Posts,
  loader: async () => {
    const posts = await fetchPosts()
    return {
      posts,
    }
  },
})

function Posts() {
  const { posts } = Route.useLoaderData()
  return (
    <div>
      <nav>
        {posts.map((post) => (
          <Link
            key={post.id}
            to={`/posts/$postId`}
            params={{ postId: post.id }}
          >
            {post.title}
          </Link>
        ))}
      </nav>
      <Outlet />
    </div>
  )
}

Sie müssen alle Komponenten und die Logik, die für die Posts-Route benötigt werden, aus der Datei src/index.tsx in die Datei src/routes/posts.tsx verschieben.

Schritt 8: Erstellen Sie die Posts-Index-Routendatei

tsx

// src/routes/posts.index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/')({
  component: PostsIndex,
})

// src/routes/posts.index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/')({
  component: PostsIndex,
})

Sie müssen alle Komponenten und die Logik, die für die Posts-Index-Route benötigt werden, aus der Datei src/index.tsx in die Datei src/routes/posts.index.tsx verschieben.

Schritt 9: Erstellen Sie die Posts-ID-Routendatei

tsx

// src/routes/posts.$postId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  component: PostsId,
  loader: async ({ params: { postId } }) => {
    const post = await fetchPost(postId)
    return {
      post,
    }
  },
})

function PostsId() {
  const { post } = Route.useLoaderData()
  // ...
}

// src/routes/posts.$postId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  component: PostsId,
  loader: async ({ params: { postId } }) => {
    const post = await fetchPost(postId)
    return {
      post,
    }
  },
})

function PostsId() {
  const { post } = Route.useLoaderData()
  // ...
}

Sie müssen alle Komponenten und die Logik, die für die Posts-ID-Route benötigt werden, aus der Datei src/index.tsx in die Datei src/routes/posts.$postId.tsx verschieben.

Schritt 10: Generieren Sie den Routenbaum

Wenn Sie einen der unterstützten Bundler verwenden, wird der Routenbaum automatisch generiert, wenn Sie das Dev-Skript ausführen.

Wenn Sie keinen der unterstützten Bundler verwenden, können Sie den Routenbaum durch Ausführen des folgenden Befehls generieren

npx tsr generate

npx tsr generate

Schritt 11: Aktualisieren Sie die Haupteinstiegsdatei, um den Router zu rendern

Nachdem Sie den Routenbaum generiert haben, können Sie die Datei src/index.tsx aktualisieren, um die Router-Instanz zu erstellen und sie zu rendern.

tsx

// src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { createRouter, RouterProvider } from '@tanstack/react-router'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

// Create a new router instance
const router = createRouter({ routeTree })

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const domElementId = 'root' // Assuming you have a root element with the id 'root'

// Render the app
const rootElement = document.getElementById(domElementId)
if (!rootElement) {
  throw new Error(`Element with id ${domElementId} not found`)
}

ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

// src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { createRouter, RouterProvider } from '@tanstack/react-router'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

// Create a new router instance
const router = createRouter({ routeTree })

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const domElementId = 'root' // Assuming you have a root element with the id 'root'

// Render the app
const rootElement = document.getElementById(domElementId)
if (!rootElement) {
  throw new Error(`Element with id ${domElementId} not found`)
}

ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Fertig!

Sie sollten Ihre Anwendung nun erfolgreich von React Location zu TanStack Router mit dateibasiertem Routing migriert haben.

React Location bietet auch einige weitere Funktionen, die Sie möglicherweise in Ihrer Anwendung verwenden. Hier sind einige Anleitungen, die Ihnen bei der Migration dieser Funktionen helfen:

TanStack Router bietet auch einige weitere Funktionen, die Sie vielleicht erkunden möchten

Wenn Sie auf Probleme stoßen oder Fragen haben, können Sie sich gerne im TanStack Discord Hilfe holen.