React Routerin juurireitin luominen

Pääreittiä, joka johtaa kotisivulle, kutsutaan usein juurireitiksi (root route), koska muut reitit renderöidään sen sisällä. On erittäin kätevää esittää se erillisenä komponenttina. Joten ottakaamme taas sovelluksemme ja luodaan kansioon src toinen kansio ja nimetään se routes. Nyt tässä kansiossa luomme tiedoston root.jsx erilliselle React-komponentille Root. Koodi tiedostossa näyttää tältä:

routes/root.jsxfunction Root() {
  return <div>Hello Router!</div>;
}

export default Root;

Ja nyt tehkäämme muutoksia tiedoston main.jsx palaan, koska arvona element me siirrämme nyt komponentin Root, ja sen sisältö on nyt erillisessä tiedostossa root.jsx:

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

Älkäämme unohtako import-riviä komponenttiimme main.jsx-tiedostossa:

main.jsximport Root from './routes/root';