Reittien Määrittely Navigointia Varten
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.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain how to create the HomePage, AboutPage, and ContactsPage components?
What happens if a user navigates to a path that isn't defined in the routes?
Can you show how to add navigation links to switch between these routes?
Awesome!
Completion rate improved to 4.17Reittien Määrittely Navigointia Varten
Pyyhkäise näyttääksesi valikon
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.
Kiitos palautteestasi!
