Virhesivun lisääminen

React Router ohjaa käyttäjän tarvittaessa virhesivulle, kun esimerkiksi sivun osoitetta ei löydy. Toteutetaan tämä virhesivu ensimmäiseksi.

Luo src/pages-kansioon ErrorPage.jsx-niminen tiedosto ja laita sen silällöksi seuraava ohjelmakoodi:

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

function ErrorPage() {
  const error = useRouteError();
  return (
    <div className="root">
      <div className="root_content">
        <h1>Hupsis!</h1>
        <p>Valitettavasti tapahtui odottaman virhe.</p>
        <p>{error.statusText || error.message}</p> 
      </div>
    </div>
  );
}

export default ErrorPage;

Funktion alussa noudetaan virhetiedot useRouteError-funktion kautta ja renderöidään käyttäjälle pahoitteleva virhesivu. Virhesivulla käytetään sovelluksen ylimpien tasojen luokkamääritteitä, joilla saadaan teksti asemoitumaan samoille kohdille kuin sovelluksen sisältö.

Tämän komponentin toiminnallisuutta emme pääse testaamaan ennen, kuin olemme määritelleet sovelluksen käyttämään React Routeria reitityksessä.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

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

lisää ErrorPage-komponentin -commit