Tässä osiossa lähdemme käytännön projektiin, jossa rakennetaan yrityksen verkkosivusto käyttäen React Routeria. Tämä projekti tarjoaa käytännön kokemusta reitityksen toteuttamisesta React-sovelluksessa. Verkkosivusto koostuu kolmesta sivusta: "Home", "About" ja "Contacts". Jokaisella sivulla on oma URL-osoitteensa, ja tutkimme, kuinka reitit määritellään näille sivuille.

Ennen kuin syvennymme yksityiskohtiin, tarkastellaan projektin yleiskuvaa:

• Projektin tavoite: Tarkoituksena on luoda yksinkertainen yrityksen verkkosivusto, jossa on kolme erillistä sivua ja navigointi toteutetaan React Routerilla;
• Sivurakenne: Verkkosivustolla on seuraavat sivut:
  • "Home" polulla: /;
  • "About" polulla: /about;
  • "Contacts" polulla: /contacts.
• React-komponentit: Kaikki React-komponentit ja tyylit tähän projektiin ovat ennalta määriteltyjä, joten voimme keskittyä ainoastaan React Routerin tarjoamaan toiminnallisuuteen;
• Code Sandbox: Käytössäsi on Code Sandbox, joka sisältää koko sovelluksen koodin. Suosittelemme tutustumaan koodiin huolellisesti, jotta ymmärrät reitityksen keskeiset periaatteet.

Alla oleva havainnollistus esittää sovelluksen lopullisen toiminnallisuuden.

Tässä on alkuperäinen koodi Code Sandbox -muodossa:

Kuinka työskennellä Code Sandboxin kanssa