Router reagieren

Create React App enthält kein Seitenrouting.

React Router ist die beliebteste Lösung.

React-Router hinzufügen

Um React Router in Ihrer Anwendung hinzuzufügen, führen Sie dies im Terminal aus dem Stammverzeichnis der Anwendung aus:

Ordnerstruktur

Um eine Anwendung mit mehreren Seitenrouten zu erstellen, beginnen wir zunächst mit der Dateistruktur.

Innerhalb des srcOrdners erstellen wir einen Ordner pagesmit mehreren Dateien:

src\pages\:

• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js

Jede Datei enthält eine sehr einfache React-Komponente.

Grundlegende Verwendung

Jetzt werden wir unseren Router in unserer index.jsDatei verwenden.

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Beispiel erklärt

Wir umschließen unseren Inhalt zuerst mit <BrowserRouter>.

Dann definieren wir unsere <Routes>. Eine Anwendung kann mehrere haben <Routes>. Unser grundlegendes Beispiel verwendet nur einen.

<Route>s können verschachtelt werden. Die erste <Route>hat einen Pfad von / und rendert die LayoutKomponente.

Die verschachtelten <Route>s erben und fügen der übergeordneten Route hinzu. Der blogsPfad wird also mit dem übergeordneten Pfad kombiniert und wird zu /blogs.

Die HomeKomponentenroute hat keinen Pfad, aber ein indexAttribut. Dadurch wird diese Route als Standardroute für die übergeordnete Route festgelegt, die /.

Das Setzen pathvon auf *dient als Sammelpunkt für alle undefinierten URLs. Das ist großartig für eine 404-Fehlerseite.

Seiten / Komponenten

Die LayoutKomponente hat <Outlet>und <Link>Elemente.

Das <Outlet>rendert die aktuell ausgewählte Route.

<Link>wird verwendet, um die URL festzulegen und den Browserverlauf zu verfolgen.

Jedes Mal, wenn wir auf einen internen Pfad verlinken, verwenden wir <Link> anstelle von <a href="">.

Die „Layout-Route“ ist eine gemeinsam genutzte Komponente, die gemeinsame Inhalte auf allen Seiten einfügt, z. B. ein Navigationsmenü.

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

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

export default Home;

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;