Reagire router


L'app Create React non include l'instradamento delle pagine.

React Router è la soluzione più popolare.


Aggiungi il router React

Per aggiungere React Router nella tua applicazione, eseguilo nel terminale dalla directory principale dell'applicazione:

npm i -D react-router-dom

Nota: questo tutorial utilizza React Router v6.

Se stai aggiornando dalla v5, dovrai utilizzare il flag @latest:

npm i -D react-router-dom@latest

Struttura delle cartelle

Per creare un'applicazione con più percorsi di pagina, iniziamo prima con la struttura del file.

All'interno della srccartella, creeremo una cartella denominata pagescon diversi file:

src\pages\:

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

Ogni file conterrà un componente React molto semplice.


Utilizzo di base

Ora useremo il nostro router nel nostro index.jsfile.

Esempio

Usa React Router per instradare le pagine in base all'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"));

Esempio spiegato

Avvolgiamo prima il nostro contenuto con <BrowserRouter>.

Quindi definiamo il nostro <Routes>. Un'applicazione può avere più file <Routes>. Il nostro esempio di base ne usa solo uno.

<Route>s può essere nidificato. Il primo <Route>ha un percorso / e esegue il rendering del Layoutcomponente.

I nidificati <Route>ereditano e si aggiungono alla route padre. Quindi il blogspercorso si unisce al genitore e diventa /blogs.

Il Homepercorso del componente non ha un percorso ma ha un indexattributo. Ciò specifica questa route come route predefinita per la route padre, che è /.

L'impostazione pathdi a *fungerà da catch-all per tutti gli URL non definiti. Questo è ottimo per una pagina di errore 404.


w3schools CERTIFIED . 2022

Ottieni la certificazione!

Completa i moduli React, fai gli esercizi, fai l'esame e diventa certificato w3schools!!

ISCRIVITI A $95

Pagine / Componenti

Il Layoutcomponente ha <Outlet>ed <Link>elementi.

Rende il <Outlet>percorso corrente selezionato.

<Link> viene utilizzato per impostare l'URL e tenere traccia della cronologia di navigazione.

Ogni volta che ci colleghiamo a un percorso interno, useremo <Link> invece di <a href="">.

Il "percorso layout" è un componente condiviso che inserisce contenuti comuni su tutte le pagine, come un menu di navigazione.

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;