Adăugarea routerului în React Router

După ce ne-am familiarizat puțin cu routerele, putem adăuga unul în aplicație.

Dar mai întâi trebuie să curățăm puțin șablonul aplicației noastre, pe care l-am creat în lecțiile anterioare. Mai exact, ne vom ocupa de folderul src. Aruncați din el folderul assets, fișierele App.css, App.jsx. În general, în el vor rămâne doar main.jsx și index.css.

Deschideți index.css și goliți-l complet. Să fie gol.

Acum să ne ocupăm de fișierul nostru principal main.jsx. În el vom avea următorul cod:

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

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

	</React.StrictMode>
);

Și acum putem adăuga routerul. Vom folosi BrowserRouter, deoarece este cel mai des folosit în aplicațiile web. Să nu uităm și de sintaxa modernă. Să adăugăm linia de import:

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

Apoi, să creăm constanta router și să creăm BrowserRouter-ul nostru după liniile de import. Să facem acest lucru astfel încât pe pagina principală să fie afișat un div cu textul 'Hello Router!'. Pentru aceasta, să specificăm calea către pagina principală și elementul pe care îl vom afișa:

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

Mai trebuie să adăugăm componenta RouterProvider și să introducem routerul pe care l-am creat mai sus. Ea acceptă toate obiectele routerului, randezăază aplicația noastră și conectează alte API-uri:

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

Codul complet va arăta astfel:

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

Să salvăm modificările. Felicitări! Aplicația noastră nu se mai plânge. Acum, dacă o pornim, pe pagina principală din browser vom vedea 'Hello Router!'.

Folosind materialul prezentat, faceți ca pe pagina principală a aplicației dvs., pe care ați creat-o în temele pentru lecțiile anterioare, să fie afișat un paragraf cu textul 'I'm number one in React!'.