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ä:

function 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:

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

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

import Root from './routes/root';

Avaa edellisten oppituntien tehtävissä luomasi sovellus. Luo juurireitille erillinen React- komponentti Root erillisessä tiedostossa root.jsx, kuten tässä oppitunnissa kuvataan. Tee muutokset main.jsx -tiedostoosi.