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 src
cartella, creeremo una cartella denominata
pages
con 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.js
file.
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 Layout
componente.
I nidificati <Route>
ereditano e si aggiungono alla route padre. Quindi il blogs
percorso si unisce al genitore e diventa
/blogs
.
Il Home
percorso del componente non ha un percorso ma ha un
index
attributo. Ciò specifica questa route come route predefinita per la route padre, che è /
.
L'impostazione path
di a *
fungerà da catch-all per tutti gli URL non definiti. Questo è ottimo per una pagina di errore 404.
Ottieni la certificazione!
ISCRIVITI A $95
Pagine / Componenti
Il Layout
componente 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;