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 src
vouer sal ons 'n vouer skep met die naam
pages
van 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.js
lê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 Layout
komponent weer.
Die geneste <Route>
s erf en voeg by die ouerroete. Die blogs
pad word dus met die ouer gekombineer en word
/blogs
.
Die Home
komponentroete het nie 'n pad nie, maar het 'n
index
kenmerk. Dit spesifiseer hierdie roete as die verstekroete vir die ouerroete, wat /
.
Deur die path
op te stel *
, sal dit dien as 'n catch-all vir enige ongedefinieerde URL's. Dit is ideaal vir 'n 404-foutbladsy.
Word gesertifiseer!
$95 INSKRIF
Bladsye / Komponente
Die Layout
komponent 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;