Reititys React Routerilla

Edellä olemme valmistelleet React Routerin käyttöönottoa luomalla lukaisan määrän erilaisia komponentteja. Tämä kaikki saattaa tuntua vielä tässä vaiheessa sekavalta, mutta seuraavissa vaiheissa palat loksahtelevat kohdilleen.

Sijoitetaan reititys omaan komponenttiinsa, tällä tavoin sovelluksen toiminta ja reititys pysyvät paremmin erossa toisistaan.

Luo src/components-kansioon AppRouter.jsx-niminen tiedosto ja sijoita sen sisällöksi seuraavat ohjelmakoodit:

```
import { createBrowserRouter, RouterProvider } from "react-router-dom";
```
Aivan ensimmäiseksi tuomme reitityksessä tarvittavan luontifunktion (createBrowserRouter) sekä reitityskomponentin (RouterProvider). Funktion avulla tulemme määrittelemään sovelluksen reitit. Komponentti tulee huolehtimaan reitityksestä sovelluksen suoritusaikana.

import Root from "../components/Root";
import ErrorPage from '../pages/ErrorPage';
import Clicker from '../pages/Clicker';
import Store from '../pages/Store';
import Settings from '../pages/Settings';

Lisäksi tuodaan myös kaikki sovelluksen reitityksessä tarvittavat komponentit. Nämä komponentit toteutimme aikaisemmissa vaiheissa.

```
function AppRouter(props) {
```
Aloitetaan AppRouter-komponentin määrittely tutulla tavalla. Komponentille välitetyt tiedot viedään props-muuttujaan, josta niihin pääsee käsiksi.
```
  const router = createBrowserRouter([
    {
      path: "/",
      element: <Root items={props.stats.itemstobuy} />,
      errorElement: <ErrorPage />,
      children: [
        { path: "", element: <Clicker stats={props.stats} handleClick={props.handleClick} /> },
        { path: "store", element: <Store stats={props.stats} />},
        { path: "settings", element: <Settings stats={props.stats} />}, 
      ]
    }
  ]);
```
Tässä taulukkorakenteessa määritellään React Routerille, miten sen tulee toimia.
- Sovellus toimii sivuston juuressa (path).
- Sovelluksen juurielementtinä toimii Root-komponentti, jonka sisälle upotetaan alisivujen komponentit (element).
- Virhesivuna toimii ErrorPage-komponentti (errorElement).
- children määrittelee kolme alasivua, joista Clicker-komponentti toimii osoitteessa /, Store-komponentti osoitteessa /store ja Settings-komponentti osoitteessa /settings.
```
  return (
    <RouterProvider router={router} />
  );
}

export default AppRouter;
```
Lopuksi vielä palautetaan RouterProvider, jolla on annettu parametreina edellä määritellyt reititystiedot.

Otetaan vielä AppRouter-komponentti käyttöön. Muokkaa src-kansiossa olevaa App.jsx-tiedostoa seuraavasti:

Poista tiedoston alusta Clicker- ja Menu-komponenttien import-lauseet.
Lisää tiedoston alkuun seuraava koodirivi, jolla tuodaan AppRouter-komponentti:
```
import AppRouter from './components/AppRouter';
```

Muuta komponentin return-lause seuraavanlaiseksi:

  return (
    <AppRouter stats={stats} handleClick={handleClick} />
  )

Näiden muutosten jälkeen selain toimii samalla tavalla kuin aikaisemmin. Sitruuna reagoi napautuksiin, alhaalla olevat menuikonit eivät reagoi toimintaan. Voit kokeilla reitittimen toimintaa kirjoittamalla selaimen osoiteriville kunkin sivun osoitteen:

Päädyt virhesivulle, jos laitat osoitteeksi sellaisen, jota ei ole määritelty. Esimerkiksi osoite http://localhost:5173/profile johtaa virhesivulle.

Seuraavaksi muokataan menualueen ikoneita niin, että ne linkittävät oikeille sivuille.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää AppRouter-komponentin ja reitityksen"

lisää AppRouter-komponentin ja reitityksen -commit

React 101

Reititys React Routerilla

Muutosten vienti versiohallintaan