Installazione di React Router in un'applicazione Redux

Nelle lezioni precedenti abbiamo installato gli strumenti principali per lavorare con Redux. Spesso succede che un'applicazione necessiti di un router per la navigazione tra le sue pagine web e la nostra applicazione non farà eccezione. Per questo installeremo la libreria React Router.

Apriamo il nostro progetto e digitiamo nel terminale il seguente comando:

npm install react-router-dom

Anticipando un po', dirò che la nostra applicazione Redux è tradizionalmente dedicata ai prodotti, le cui informazioni vengono pubblicate da alcuni venditori. Quindi ora modificheremo leggermente il componente principale App, e aggiungeremo anche all'applicazione le funzionalità per implementare il routing.

Per iniziare, andiamo nella cartella src, poi in app e creiamo qui il file root.jsx. Questo sarà la radice del nostro sito: a sinistra avremo un menu, e a destra - il contenuto (per ora qui abbiamo solo un titolo):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Prodotti</a>
					<a>Venditori</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>Questa è la mia prima app Redux!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

E il componente App lo modificheremo. Per iniziare eliminiamo completamente il suo contenuto. Poi importiamo due funzioni per il router e il nostro componente radice Root:

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Sotto, dopo l'import, creiamo il router, e specifichiamo la prima route, passandogli il nostro Root come elemento da renderizzare e, di conseguenza, impostando il percorso su '/'. In futuro, in App aggiungeremo anche altre route necessarie:

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

Sotto scriviamo il codice della funzione App:

function App() {
	return <RouterProvider router={router} />
}

export default App

Tutto fatto. Avviamo. Nella prossima sezione implementeremo i componenti per far funzionare l'applicazione Redux.

Per finire, aggiungiamo un po' di stile, scrivendo le regole CSS in index.css:

body {
	font-size: 24px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

ul {
	list-style: none;
	padding: 0;
}

h1, h2, h3 {
	margin: 0;
}

a {
	text-decoration: none;
	color: blue;
	cursor: pointer;
}

#main {
	display: flex;
	margin: 20px;
}

#menu {
	margin-right: 50px;
	padding-top: 50px;
	padding-right: 50px;
	border-right: 2px solid lightgray;
	font-weight: bold;
}

Aggiungi React Router alla tua applicazione.

Lascia che la tua applicazione riguardi studenti, le cui informazioni saranno pubblicate dagli insegnanti. Tenendo conto di ciò, crea il componente radice Root. Modifica il componente App come descritto nella lezione.