React Routerin asentaminen Redux-sovellukseen

Edellisillä tunneilla asensimme perustyökalut Reduxin käyttöön. Usein sovellus tarvitsee reitittimen navigoidakseen sen verkkosivujen välillä, eikä sovelluksemme tule olemaan poikkeus. Tätä varten asennamme kirjaston React Router.

Avataan projektimme ja kirjoitetaan terminaaliin seuraava komento:

terminalnpm install react-router-dom

Hiukan eteenpäin hypäten, sanon, että Redux-sovelluksemme on perinteisesti omistettu tuotteille, joiden tiedot julkaisevat tietyt myyjät. Siksi nyt muokkaamme hieman pääkomponenttia App, ja lisäämme sovellukseen toiminnot reitityksen toteuttamiseksi.

Aluksi mennään kansioon src, sitten kohtaan app ja luodaan tänne tiedosto root.jsx. Tämä on sivustomme juuri: vasemmalla on valikko, ja oikealla - sisältö (toistaiseksi meillä on täällä vain otsikko):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Tuotteet</a>
          <a>Myyjät</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>Tämä on ensimmäinen Redux-sovellukseni!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

Ja komponenttia App muokkaamme. Aluksi poistamme sen sisällön kokonaan. Sitten tuomme kaksi funktiota reitittimelle ja juurikomponenttimme Root:

App.jsximport { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Alla tuonnin jälkeen luomme reitittimen, ja määritämme ensimmäisen reitin, antamalla sille Root näytettäväksi elementiksi ja vastaavasti asettamalla poluksi '/'. Tulevaisuudessa App:ään lisäämme myös muut tarvittavat reitit:

App.jsxconst router = createBrowserRouter([{ path: '/', element: <Root /> }])

Alla kirjoitamme funktion App koodin:

App.jsxfunction App() {
  return <RouterProvider router={router} />
}

export default App

Valmista. Käynnistetään. Seuraavassa osassa toteutamme Redux-sovelluksen komponentteja.

Lopuksi lisätään hieman kauneutta kirjoittamalla tyylit tiedostoon index.css:

index.cssbody {
  font-size: 24px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
}

a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}

#main {
  display: flex;
  margin: 20px;
}

#menu {
  margin-right: 50px;
  padding-top: 50px;
  padding-right: 50px;
  border-right: 2px solid lightgray;
  font-weight: bold;
}