Nyt kun sovellus on kääritty BrowserRouter-komponenttiin reitityksen mahdollistamiseksi, seuraava vaihe on määrittää sovelluksen sisältämät reitit (polut). Nämä reitit määrittävät sovelluksen rakenteen ja ohjaavat, mitä sisältöä näytetään URL-osoitteen perusteella.

React Router tarjoaa kaksi keskeistä komponenttia reittien määrittelyyn: Routes ja Route. Routes-komponentti toimii säiliönä kaikille reittimäärittelyille, kun taas Route-komponentti edustaa yksittäistä reittikonfiguraatiota.

Reittien määrittelyn syntaksi:

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

Tässä rakenteessa:

• <path_value>: Määrittää reitin URL-konfiguraation;
• <component_to_render>: Määrittää komponentin, joka renderöidään, kun käyttäjä siirtyy kyseiseen polkuun.

Esimerkki

Sovelletaan tätä käytäntöä projektiimme. Avaa App.jsx-tiedosto ja tuo Routes- ja Route-komponentit react-router-dom-kirjastosta:

import { Routes, Route } from "react-router-dom";

Määrittele sovelluksen reitit return-komponentin App-lauseessa:

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Koodin selitys:

• Rivi 4, 8: <Routes>: Tämä komponentti toimii säiliönä sovelluksen reittien määrittelylle ja toimii yksittäisten reittimäärittelyjen ylätason komponenttina;
• Rivi 5: <Route>: Edustaa reittimäärittelyä. Määrittää, että kun URL-polku vastaa /, renderöidään <HomePage /> -komponentti;
• Rivi 6: <Route>: Määrittelee toisen reitin. Kun URL-polku vastaa /about, renderöidään <AboutPage /> -komponentti;
• Rivi 7: <Route>: Määrittelee toisen reitin. Kun URL-polku vastaa /contacts, renderöidään <ContactsPage /> -komponentti.