React Routerin juurikomponentti

Vielä viimeiseksi, ennen kuin otamme React Routerin käyttöön, muodostamme App-komponentin sisällöstä ns. Root-komponentin, jota React Router käyttää sivurenderöintien pohjana. Root-komponentti on tarkoitettu tilanteisiin, jossa sivulla on jotain yhteistä kaikkien muiden sivujen kanssa. Sovelluksessamme yhteistä on esimerkiksi sovelluksen sijoittuminen ruudulle sekä ruutualueen jakautuminen sisältö- ja menualueeseen.

Luo src/components-kansioon Root.jsx-niminen tiedosto ja sijoita sen sisällöksi seuraava ohjelmakoodi:

import Menu from '../components/Menu'
import { Outlet } from "react-router-dom";

function Root(props) {
  return (
    <div className="root">
      <div className="root_content">
        <Outlet />
      </div>
      <Menu items={props.items}/>
    </div>
  )
}

export default Root;

Tässä ohjelmakoodissa ei ole oikeastaan mitään muuta erityistä kuin react-router-dom-paketista tuotu Outlet-komponentti. Outlet toimii ainoastaan merkkaamaan, mihin kohtaan sivujen sisältökomponentit sijoitetaan. React Router tulee sijoittamaan Clicker, Store ja Settings-komponentit Outlet-komponentin paikalle.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää Root-komponentin"

lisää Root-komponentin -commit