Navigointilinkkien lisääminen

Seuraavaksi lisätään sovelluksen alaosan menualueen ikoneihin linkitys. Avaa src/components-kansiossa oleva Menu.jsx-niminen tiedosto ja muokkaa sitä seuraavasti:

  1. Lisää tiedoston alkuun seuraava NavLink-komponentin tuontirivi:

    import { NavLink } from "react-router-dom";

  2. Kääri jokainen render-lauseen sisällä oleva ikoni NavLink-komponentilla seuraavasti:

      return (
    <div className="menu">
      <div>
        <NavLink to="/"><img src={iconLemon} alt="main" /></NavLink>
      </div>
      <div>
        <NavLink to="/store">
          <img src={iconPackage} alt="store" />
          { props.items ? <span className="menu_badge">{props.items}</span> : null }
        </NavLink>
      </div>
      <div>
        <NavLink to="/settings"><img src={iconSettings} alt="settings" /></NavLink>
      </div>
    </div>
  );

NavLink-komponentin käyttö hyvin samanlainen kuin esimerkiksi HTML:n a-elementin. Klikattava asia tulee komponentin sisällöksi, linkki määritellään komponentin to-määritteellä. Muuta ei tarvitse tehdä, React Router hoitaa loput.

Nyt sovellus toimii selaimessa jo niin, että sivu vaihtuu aina kun käyttäjä klikkaa sivun alareunassa olevaa ikonia. Lisäksi klikkausten määrä säilyy, vaikka välillä käytäisiin toisella sivulla.

Navigointi toimii menualueen ikoneista

Tarkkaavaisimmat huomasivat, että menualueella korostuu automaattisesti se sivu, joka on aktiivisena. Tämä on toteutettu hyödyntämällä NavLink-komponentin toimintaa. NavLink kytkee aktiivisena olevan linkin automaattisesti active-luokkaan. Tyylimääritteissä korostus toteutetaan niin, että ei aktiiviset elementit ovat osittain läpinäkyviä. Alla on katkelma näistä tyylimääritteistä.

.menu a {
  opacity: 0.5;              /* kaikki menuikonit ovat läpinäkyvyviä */
}

.menu a.active {
  opacity: 1;                /* korostetaan aktiivinen menuelementti */
}

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää linkityksen Menu-komponenttiin"

lisää linkityksen Menu-komponenttiin -commit