Reagovat Router

❮ Předchozí Další ❯

Create React App nezahrnuje směrování stránek.

React Router je nejoblíbenější řešení.

Přidejte React Router

Chcete-li do své aplikace přidat React Router, spusťte jej v terminálu z kořenového adresáře aplikace:

npm i -D react-router-dom

Poznámka: Tento tutoriál používá React Router v6.

Pokud upgradujete z v5, budete muset použít příznak @latest:

npm i -D react-router-dom@latest

Struktura složek

Chcete-li vytvořit aplikaci s více trasami stránek, začněme nejprve strukturou souborů.

Ve srcsložce vytvoříme složku pojmenovanou pagess několika soubory:

src\pages\:

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

Každý soubor bude obsahovat velmi základní komponentu React.

Základní použití

Nyní použijeme náš router v našem index.jssouboru.

Příklad

Použijte React Router pro směrování na stránky na základě 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"));

Příklad vysvětlen

Náš obsah nejprve zabalíme do <BrowserRouter>.

Poté definujeme naše <Routes>. Aplikace může mít více <Routes>. Náš základní příklad používá pouze jeden.

<Route>s lze vnořit. První <Route>má cestu / a vykresluje Layoutkomponentu.

Vnořené <Route>s zdědí a přidají se k nadřazené trase. Cesta se tedy blogsspojí s rodičem a stane se /blogs.

Trasa Homekomponenty nemá cestu, ale má indexatribut. To určuje tuto trasu jako výchozí trasu pro nadřazenou trasu, což je /.

Nastavení pathna *bude fungovat jako vše pro všechny nedefinované adresy URL. To je skvělé pro chybovou stránku 404.

Získejte certifikaci!

Dokončete moduly React, proveďte cvičení, udělejte zkoušku a získejte certifikaci w3schools!!

95 $ PŘIHLÁSIT SE

Stránky / komponenty

Komponenta Layoutmá <Outlet>a <Link>prvky.

Vykreslí <Outlet>aktuální vybranou trasu.

<Link> slouží k nastavení adresy URL a sledování historie procházení.

Kdykoli odkazujeme na interní cestu, použijeme <Link> místo <a href="">.

„Trasa rozložení“ je sdílená komponenta, která vkládá společný obsah na všechny stránky, jako je například navigační nabídka.

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;