Maršrutizatoriaus pridėjimas į React Router

Šiek tiek susipažinę su maršrutizatoriais, galime vieną iš jų pridėti į programą.

Bet pirmiausia mums reikia šiek tiek išvalyti mūsų programos šabloną, kurį sukūrėme ankstesnėse pamokose. O konkrečiai - pasirūpinsime aplanku src. Išmeskite iš jo aplanką assets, failus App.css, App.jsx. Apskritai, jums joje liks tik main.jsx ir index.css.

Atidarykite index.css ir visiškai jį išvalykite. Tebūnie jis tuščias.

Dabar pasirūpinsime mūsų pagrindiniu failu main.jsx. Jame mes turėsime tokį kodą:

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

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

	</React.StrictMode>
);

O dabar galime pridėti maršrutizatorių. Mes naudosime BrowserRouter, kadangi jis dažniausiai naudojamas žiniatinklio programose. Nepamirškime ir apie šiuolaikinę sintaksę. Pridėsime importo eilutę:

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

Tada, sukurkime konstantą router ir sukurkime mūsų BrowserRouter po importo eilučių. Padarykime tai taip, kad pagrindiniame puslapyje mums būtų rodomas div su užrašu 'Hello Router!'. Tam nurodysime kelią į pagrindinį puslapį ir elementą, kurį norime rodyti:

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

Mums dar reikia pridėti komponentą RouterProvider ir įrašyti aukščiau mūsų sukurtą maršrutizatorių. Jis priima visus maršrutizatoriaus objektus, atvaizduoja mūsų programą ir prijungia kitas API:

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

Pilnas kodas atrodys taip:

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>
);

Išsaugokime pakeitimus. Sveikinu! Mūsų programa daugiau nebesikeikia. Dabar, jei ją paleisime, tai pagrindiniame puslapyje naršyklėje mes pamatysime 'Hello Router!'.

Naudodamiesi pateikta medžiaga, padarykite taip, kad pagrindiniame jūsų programos puslapyje, kurią sukūrėte namų darbuose ankstesnėms pamokoms, jums būtų rodoma pastraipa su tekstu 'I'm number one in React!'.