Pagina del prodotto nel browser con Redux

Nella scorsa lezione abbiamo creato una pagina separata per il prodotto. Ora dobbiamo fare in modo che quando si clicca su un pulsante, la nostra pagina appare nel browser.

Per cominciare, assegniamole un indirizzo a cui verrà visualizzata. Apriamo il file App.jsx, in cui definiamo le route, e aggiungiamo a children un'altra route figlia (non dimenticate di importare ProductPage.jsx). Specifichiamo il percorso e il componente che vogliamo visualizzare:

{
	path: '/products/:productId',
	element: <ProductPage />,
},

Ora apriamo ProductsList.jsx nella cartella products e modifichiamo leggermente il codice per dispProducts. Ora abbiamo una pagina separata con informazioni complete su ogni prodotto. Ciò significa che nell'elenco dei prodotti visualizzeremo solo il nome del prodotto e un testo descrittivo abbreviato. Aggiungeremo anche un link sotto forma di elemento di navigazione Link dalla libreria del router, al click del quale si potrà accedere alla pagina del prodotto. Aggiungiamo anche una div con classe product-excerpt, per separare visivamente i prodotti. Ora il nostro codice per dispProducts sarà così:

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

Importiamo Link:

import { Link } from 'react-router-dom'

E aggiungiamo stili per le classi link-btn e product-excerpt in index.css:

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

Infine, rendiamo funzionante anche il link nel menu a sinistra, che porta alla pagina con l'elenco dei prodotti, in modo da poter accedervi da qualsiasi altro punto. Per fare questo, apriamo il nostro root.jsx e sostituiamo questa riga di codice:

<a>Products</a>

Con la seguente:

<NavLink to="/products" end>
	Products
</NavLink>

Non dimentichiamo di importare NavLink dalla libreria per React router:

import { Outlet, NavLink } from 'react-router-dom'

Avviamo la nostra applicazione. Ora possiamo accedere alla pagina di informazioni di qualsiasi prodotto, cliccando sul pulsante di visualizzazione. Provate ora ad aggiungere un nuovo prodotto e guardate le sue informazioni nella pagina separata cliccando il pulsante di visualizzazione. Inoltre, ora, per tornare all'elenco dei prodotti basta cliccare su 'Products' nel menu a sinistra. Mentre navigate su pagine diverse, osservate come cambia l'URL nella barra degli indirizzi del browser.

Aprite la vostra applicazione con gli studenti. Nel file App.jsx create un altro route figlio per la pagina dello studente.

Nel file StudentsList.jsx apportate al codice le modifiche per dispStudents, come mostrato nella lezione.

Fate in modo che il link 'Students' nel menu a sinistra porti alla pagina con l'elenco degli studenti. Verificate che tutto funzioni.

Osservate come cambia il valore nella barra degli indirizzi del browser, a seconda della pagina in cui vi trovate attualmente.