Reitittimen lisääminen React Routeriin

Hieman tutustuttuamme reittittimiin, voimme lisätä yhden niistä sovellukseen.

Mutta ensin meidän täytyy siivota hieman sovelluksemme mallipohjaa, jonka loimme edellisillä tunneilla. Tarkemmin sanottuna - käsitellään kansiota src. Heitä pois siitä kansio assets, tiedostot App.css, App.jsx. Yleisesti ottaen sinulle jää siitä vain main.jsx ja index.css.

Avaa index.css ja tyhjennä se kokonaan. Olkoon se tyhjä.

Nyt käsitellään päätiesotamme main.jsx. Siinä on meille tällaista koodia:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

Ja nyt voimme lisätä reitittimen. Käytämme BrowserRouter, koska sitä käytetään useimmiten verkkosovelluksissa. Älkäämme unohtako nykyaikaista syntaksia. Lisätään import-rivi:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

Sitten, luodaan vakio router ja luodaan BrowserRouter import-rivien jälkeen. Tehdään tämä niin, että pääsivulla näytetään div tekstillä 'Hello Router!'. Kirjoitetaan pääsivun polku ja näytettävä elementti:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Meidän täytyy vielä lisätä komponentti RouterProvider ja syöttää yllä luomamme reititin. Se ottaa vastaan kaikki reitittimen objektit, renderöi sovelluksemme ja yhdistää muut API:t:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Täydellinen koodi näyttää tältä:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Tallennetaan muutokset. Onnittelut! Meidän kanssanne sovellus ei enää valita. Nyt, jos käynnistämme sen, niin pääsivulla selaimessa näemme 'Hello Router!'.

Käyttäen esitettyä materiaalia, tee niin, että pääsivulla sovelluksesi, jonka loit kotitehtävissä edellisiin oppitunteihin, sinulla näytetään kappale tekstillä 'I'm number one in React!'.