Reageer-router

Create React App bevat geen paginarouting.

React Router is de meest populaire oplossing.

React-router toevoegen

Om React Router aan uw applicatie toe te voegen, voert u dit uit in de terminal vanuit de hoofdmap van de applicatie:

Mapstructuur

Om een ​​applicatie met meerdere paginaroutes te maken, beginnen we eerst met de bestandsstructuur.

Binnen de srcmap maken we een map met de naam pagesmet verschillende bestanden:

src\pages\:

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

Elk bestand bevat een zeer eenvoudige React-component.

Basisgebruik

Nu zullen we onze router in ons index.jsbestand gebruiken.

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 uitgelegd

We verpakken onze inhoud eerst met <BrowserRouter>.

Vervolgens definiëren we onze <Routes>. Een applicatie kan meerdere <Routes>. Ons basisvoorbeeld gebruikt er maar één.

<Route>s kunnen worden genest. De eerste <Route>heeft een pad van / en geeft de Layoutcomponent weer.

De geneste <Route>s erven en worden toegevoegd aan de bovenliggende route. Dus het blogspad wordt gecombineerd met de ouder en wordt /blogs.

De Homecomponentroute heeft geen pad maar een indexattribuut. Dat specificeert deze route als de standaardroute voor de bovenliggende route, namelijk /.

Als u de pathto *instelt, fungeert deze als een verzamelnaam voor niet-gedefinieerde URL's. Dit is geweldig voor een 404-foutpagina.

Pagina's / Componenten

De Layoutcomponent heeft <Outlet>en <Link>elementen.

De <Outlet>rendert de huidige geselecteerde route.

<Link>wordt gebruikt om de URL in te stellen en de browsegeschiedenis bij te houden.

Telkens wanneer we naar een intern pad linken, gebruiken we in <Link> plaats van <a href="">.

De "lay-outroute" is een gedeeld onderdeel dat gemeenschappelijke inhoud op alle pagina's invoegt, zoals een navigatiemenu.

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;

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;