Reageer Router


Create React App sluit nie bladsyroetering in nie.

React Router is die gewildste oplossing.


Voeg React Router by

Om React Router by jou toepassing by te voeg, voer dit uit in die terminaal vanaf die wortelgids van die toepassing:

npm i -D react-router-dom

Let wel: Hierdie tutoriaal gebruik React Router v6.

As jy vanaf v5 opgradeer, sal jy die @nuutste vlag moet gebruik:

npm i -D react-router-dom@latest

Vouerstruktuur

Om 'n toepassing met veelvuldige bladsyroetes te skep, kom ons begin eers met die lêerstruktuur.

Binne die srcvouer sal ons 'n vouer skep met die naam pagesvan verskeie lêers:

src\pages\:

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

Elke lêer sal 'n baie basiese React-komponent bevat.


Basiese gebruik

Nou sal ons ons router in ons index.jslêer gebruik.

Voorbeeld

Gebruik React Router om na bladsye te stuur gebaseer op URL:

index.js:

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"));

Voorbeeld Verduidelik

Ons draai ons inhoud eers toe met <BrowserRouter>.

Dan definieer ons ons <Routes>. 'n Toepassing kan veelvuldige <Routes>. Ons basiese voorbeeld gebruik net een.

<Route>s kan geneste word. Die eerste <Route>het 'n pad van / en gee die Layoutkomponent weer.

Die geneste <Route>s erf en voeg by die ouerroete. Die blogspad word dus met die ouer gekombineer en word /blogs.

Die Homekomponentroete het nie 'n pad nie, maar het 'n indexkenmerk. Dit spesifiseer hierdie roete as die verstekroete vir die ouerroete, wat /.

Deur die pathop te stel *, sal dit dien as 'n catch-all vir enige ongedefinieerde URL's. Dit is ideaal vir 'n 404-foutbladsy.


w3schools CERTIFIED . 2022

Word gesertifiseer!

Voltooi die React-modules, doen die oefeninge, neem die eksamen en word w3schools-gesertifiseer!!

$95 INSKRIF

Bladsye / Komponente

Die Layoutkomponent het <Outlet>en <Link>elemente.

Die <Outlet>gee die huidige geselekteerde roete weer.

<Link>word gebruik om die URL te stel en tred te hou met die blaaigeskiedenis.

Elke keer as ons na 'n interne pad skakel, sal ons in <Link> plaas van <a href="">.

Die "uitlegroete" is 'n gedeelde komponent wat algemene inhoud op alle bladsye invoeg, soos 'n navigasiekieslys.

Layout.js:

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;

Home.js:

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

export default Home;

Blogs.js:

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

export default Blogs;

Contact.js:

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

export default Contact;

NoPage.js:

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

export default NoPage;