Schritt 2: Einzelne Komponenten erstellen

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;




<p><strong>über.js</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

Dynamisches Routing mit React Router v6

Um dynamische Routen zu verarbeiten, z. B. eine Benutzerprofilseite, bei der die Benutzer-ID Teil der URL ist, stellt React Router v6 den Hook ?useParams“ bereit.

Schritt 1: Definieren Sie eine dynamische Route

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

Erkl?rung:

• :userId ist ein dynamisches Segment im Routenpfad. Mit dem useParams-Hook k?nnen Sie auf den Wert von userId in der UserProfile-Komponente zugreifen.
• Wenn Sie zu /user/123 navigieren, rendert die UserProfile-Komponente die Benutzer-ID und zeigt sie als 123 an.

Verschachtelte Routen in React Router v6

Mit verschachtelten Routen k?nnen Sie komplexe Layouts erstellen, indem Sie Unterrouten innerhalb der übergeordneten Routen definieren.

Schritt 1: übergeordnete und untergeordnete Routen definieren

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

Erkl?rung:

• Die Dashboard-Komponente enth?lt verschachtelte Routen für übersicht und Einstellungen.
• Das /* in der übergeordneten Route stellt sicher, dass alle untergeordneten Routen unter /dashboard behandelt werden.

React Router v6 Hooks

React Router v6 führt mehrere Hooks für die Navigation und den Zugriff auf Routing-Informationen ein:

1. useNavigate: Navigieren Sie programmgesteuert zu verschiedenen Routen.
2. useParams: Auf dynamische URL-Parameter zugreifen.
3. useLocation: Informationen zum aktuellen Standort (URL) abrufen.
4. useMatch: Ordnet die aktuelle URL einer bestimmten Route zu.
5. useResolvedPath: Einen Pfad zu einer absoluten URL aufl?sen.

Beispiel: Navigate Hook verwenden

Der useNavigate-Hook erm?glicht die programmgesteuerte Navigation innerhalb Ihrer Anwendung.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

Best Practices für React Router v6

• Genaue übereinstimmung standardm??ig: React Router v6 gleicht Routen standardm??ig genau ab, was die Handhabung der Routenanpassung erleichtert, ohne dass eine genaue Angabe erforderlich ist.
• Element-Requisite verwenden: übergeben Sie JSX direkt an die Element-Requisite, anstatt die Komponenten-Requisite zu verwenden, was Ihren Code vereinfacht und den Bedarf an Renderfunktionen reduziert.
• Verschachteltes Routing: Verwenden Sie verschachtelte Routen, um komplexe Seitenlayouts mit untergeordneten Routen zu erstellen und so Ihren Code modular und wartbar zu halten.
• Behandeln Sie 404-Fehler mit Wildcard-Route: Verwenden Sie den Platzhalter *, um alle nicht übereinstimmenden Routen abzufangen und eine 404-Seite anzuzeigen oder Benutzer auf eine Standardroute umzuleiten.

Fazit

React Router v6 führt mehrere Verbesserungen gegenüber früheren Versionen ein, darunter eine einfachere API, bessere Routenanpassung und verbesserte Unterstützung für dynamische und verschachtelte Routen. Durch die Nutzung von Hooks wie useNavigate, useParams und useLocation k?nnen Sie leistungsstarke und flexible Routingsysteme in Ihren React-Anwendungen erstellen.