Aggiunta del router in React Router

Dopo aver preso un po' di confidenza con i router, possiamo aggiungerne uno all'applicazione.

Ma prima dobbiamo pulire un po' il template della nostra applicazione, che abbiamo creato nelle lezioni precedenti. Nello specifico - occupiamoci della cartella src. Eliminate da essa la cartella assets, i file App.css, App.jsx. In pratica, in essa rimarranno solo main.jsx e index.css.

Aprite index.css e pulitelo completamente. Lasciatelo vuoto.

Ora occupiamoci del nostro file principale main.jsx. In esso avremo questo codice:

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

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

	</React.StrictMode>
);

E ora possiamo aggiungere il router. Useremo BrowserRouter, poiché è il più utilizzato nelle applicazioni web. Non dimentichiamo la sintassi moderna. Aggiungiamo la riga di import:

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

Poi, creiamo la costante router e creiamo il nostro BrowserRouter dopo le righe di import. Facciamolo in modo che nella pagina principale venga visualizzato un div con la scritta 'Hello Router!'. Per fare questo specifichiamo il percorso della pagina principale e l'elemento che vogliamo visualizzare:

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

Dobbiamo ancora aggiungere il componente RouterProvider e inserire il router che abbiamo creato sopra. Esso accetta tutti gli oggetti del router, renderizza la nostra applicazione e collega le altre API:

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

Il codice completo sarà così:

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

Salviamo le modifiche. Congratulazioni! La nostra applicazione non dà più errori. Ora, se la avviamo, sulla pagina principale nel browser vedremo 'Hello Router!'.

Usando il materiale fornito, fate in modo che sulla pagina principale della vostra applicazione, che avete creato nei compiti a casa delle lezioni precedenti, venga visualizzato un paragrafo con il testo 'I'm number one in React!'.