Migration von React Router Checkliste

Wenn Ihre Benutzeroberfläche leer ist, öffnen Sie die Konsole. Wahrscheinlich sehen Sie einige Fehler, die etwa so lauten: cannot use 'useNavigate' outside of context . Das bedeutet, dass noch React Router APIs importiert und referenziert werden, die Sie finden und entfernen müssen. Der einfachste Weg, alle React Router-Importe zu finden, ist die Deinstallation von react-router-dom . Danach erhalten Sie TypeScript-Fehler in Ihren Dateien. Dann wissen Sie, was Sie durch einen Import von @tanstack/react-router ersetzen müssen.

Hier ist das Beispiel-Repository

• Router installieren - npm i @tanstack/react-router (siehe detaillierte Installationsanleitung)
• Optional: Deinstallieren Sie React Router, um TypeScript-Fehler bei Importen zu erhalten.
  • Ich weiß im Moment nicht, ob eine schrittweise Migration möglich ist, aber es ist wahrscheinlich, dass Sie mehrere Router-Provider haben könnten, was nicht wünschenswert ist.
  • Die APIs zwischen React Router und TanStack Router sind sehr ähnlich und könnten wahrscheinlich in einem oder zwei Sprint-Zyklen erledigt werden, wenn dies die Arbeitsweise Ihres Unternehmens ist.
• Erstellen Sie Routen für jede vorhandene React Router-Route
• Erstellen Sie die Root-Route
• Erstellen Sie eine Router-Instanz
• Fügen Sie ein globales Modul in main.tsx hinzu
• Entfernen Sie alle React Router (createBrowserRouter oder BrowserRouter), Routes und Route Komponenten aus main.tsx
• Optional: Refaktorieren Sie die render Funktion für benutzerdefinierte Setups/Provider – Das referenzierte Repository oben enthält ein Beispiel – Dies war im Fall von Supertokens notwendig. Supertoken hat eine spezifische Einrichtung mit React Router und eine andere Einrichtung mit allen anderen React-Implementierungen
• Setzen Sie den RouterProvider und übergeben Sie ihm den Router als Prop
• Ersetzen Sie alle Instanzen der React Router Link Komponente durch die @tanstack/react-router Link Komponente
  • Fügen Sie die to Prop mit einem literalen Pfad hinzu
  • Fügen Sie die params Prop hinzu, wo nötig, mit Parametern wie folgt: params={{ orderId: order.id }}
• Ersetzen Sie alle Instanzen des React Router useNavigate Hooks durch den @tanstack/react-router useNavigate Hook
  • Setzen Sie die to Eigenschaft und die params Eigenschaft, wo benötigt
• Ersetzen Sie alle React Router Outlets durch das entsprechende Äquivalent von @tanstack/react-router
• Wenn Sie den useSearchParams Hook von React Router verwenden, verschieben Sie den Standardwert für Suchparameter in die `validateSearch`-Eigenschaft einer Routendefinition.
  • Anstatt den useSearchParams Hook zu verwenden, nutzen Sie die `search`-Eigenschaft von @tanstack/react-router Link , um den Suchparameterstatus zu aktualisieren.
  • Um Suchparameter zu lesen, können Sie Folgendes tun:
    • const { page } = useSearch({ from: productPage.fullPath })
• Wenn Sie den useParams Hook von React Router verwenden, aktualisieren Sie den Import, damit er von @tanstack/react-router stammt, und setzen Sie die `from`-Eigenschaft auf den literalen Pfadnamen, von dem aus Sie das Parameterobjekt lesen möchten.
  • Nehmen wir an, wir haben eine Route mit dem Pfadnamen orders/$orderid.
  • Im useParams Hook würden wir unseren Hook wie folgt einrichten: const params = useParams({ from: "/orders/$orderId" })
  • Dann würden wir die Bestell-ID überall dort, wo wir darauf zugreifen möchten, vom `params`-Objekt abrufen: params.orderId