Reaguj na router

❮ Poprzedni Następny ❯

Tworzenie aplikacji React nie obejmuje routingu stron.

Najpopularniejsze rozwiązanie to React Router.

Dodaj router React

Aby dodać React Router do swojej aplikacji, uruchom to w terminalu z katalogu głównego aplikacji:

npm i -D react-router-dom

Uwaga: Ten samouczek używa React Router v6.

W przypadku aktualizacji z wersji 5 konieczne będzie użycie flagi @latest:

npm i -D react-router-dom@latest

Struktura folderów

Aby utworzyć aplikację z wieloma trasami stron, zacznijmy od struktury plików.

W srcfolderze utworzymy folder o nazwie pagesz kilkoma plikami:

src\pages\:

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

Każdy plik będzie zawierał bardzo podstawowy komponent React.

Podstawowe użycie

Teraz użyjemy naszego routera w naszym index.jspliku.

Przykład

Użyj React Router, aby kierować do stron na podstawie adresu 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"));

Przykład wyjaśniony

Najpierw zawijamy naszą treść w <BrowserRouter>.

Następnie definiujemy nasze <Routes>. Aplikacja może mieć wiele <Routes>. Nasz podstawowy przykład używa tylko jednego.

<Route>s mogą być zagnieżdżone. Pierwszy <Route>ma ścieżkę / i renderuje Layoutkomponent.

Zagnieżdżone <Route>s dziedziczą i dodają do trasy nadrzędnej. Tak więc blogsścieżka jest połączona z rodzicem i staje się /blogs.

Trasa Homeskładowa nie ma ścieżki, ale ma indexatrybut. To określa tę trasę jako trasę domyślną dla trasy nadrzędnej, czyli /.

Ustawienie pathto *będzie działać jako catch-all dla dowolnych niezdefiniowanych adresów URL. To jest świetne dla strony błędu 404.

Zostać certyfikowanym!

Uzupełnij moduły React, wykonaj ćwiczenia, podejdź do egzaminu i uzyskaj certyfikat w3schools!!

95 $ ZAPISZ

Strony / Komponenty

Komponent Layoutma <Outlet>i <Link>elementy.

Renderuje <Outlet>aktualnie wybraną trasę.

<Link>służy do ustawiania adresu URL i śledzenia historii przeglądania.

Za każdym razem, gdy łączymy się ze ścieżką wewnętrzną, użyjemy <Link> zamiast <a href="">.

„Trasa układu” to współdzielony komponent, który wstawia wspólną treść na wszystkich stronach, na przykład menu nawigacyjne.

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;