Una single page application con React Router

Torniamo per un attimo al codice JSX che genera l'anteprima dei post. Come si ricorderà, questo è generato dal componente PostItem:

return(
	<div className="post-container">
		<div className="post-content" id={post.slug}>
			<div className="post-featured-image">
				{
					isLoading ? <p>Loading...</p> : <img src={featuredImage} />
				}
			</div>
			<div className="post-details">
				<div className="post-date">
					{date}
				</div>
				<h2 className="post-title">
					<a href={post.url}>
						<p dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
					</a>
				</h2>
				<div
					className="post-excerpt"
					dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
				/>
			</div>
		</div>
	</div>
);

Il codice HTML

Il valore dell'attributo href del link punta all'URL dell'elemento post corrente, che non è altro che il permalink del post. Il codice qui sopra genera il seguente blocco HTML:

<div class="post-content">
	<div class="post-featured-image">
		<img src="https://images.pexels.com/photos/270404/pexels-photo-270404.jpeg">
	</div>
	<div class="post-details">
		<div class="post-date">17 agosto 2023</div>
		<h2 class="post-title">
			<a href="https://developer.wordpress.org/news/2023/08/the-anatomy-of-a-letterform/">The anatomy of a letterform</a></h2>
		<div class="post-excerpt">
			<p>Typography series part 2: The anatomy of a letterform. Letters have parts! See how they combine to give a typeface its voice.</p>
		</div>
	</div>
</div> // post-content

Con questo codice, facendo click sul titolo del post, il lettore viene reindirizzato alla risorsa originaria, esterna alla nostra App.

Se l'obiettivo è quello di creare una SPA ed evitare che gli utenti lascino la pagina dell'App, dovremo fare in modo di caricare l'intero post al suo interno. Ciò ci porta a introdurre il concetto di routing.

Il routing di un'applicazione React

Nell'ambito di un'applicazione Web, il routing consiste nell'associazione di un URL a una specifica risorsa della stessa applicazione. In React, ciò significa associare un URL a un componente.

React non supporta nativamente il routing, ma la funzionalità può essere facilmente implementata grazie alla libreria React Router.

Se non abbiamo ancora installato React Router come illustrato nel capitolo 5 di questa guida, installeremo la libreria dal terminale dei comandi. Se abbiamo un processo in corso, interrompiamolo con CTRL + C e spostiamoci nella cartella del progetto. Qui installiamo react-router con il seguente comando:

npm install react-router-dom

Al termine dell'installazione, avviamo nuovamente il servizio:

npm start

React Router fornisce una serie di componenti che permettono di implementare il routing. Qui useremo i seguenti:

• BrowserRouter memorizza la posizione corrente nella barra degli indirizzi del browser e naviga utilizzando la History API di HTML 5. Questa è integrata nel browser e permette di mantenere la UI in sincro con l'URL corrente. L'elemento BrowserRouter racchiude l'intero output dell'applicazione.
• Routes racchiude una serie di child root che partono dalla root corrente.
• Route abbina un segmento di URL ad un componente, al caricamento e alle mutazioni dei dati. È il componente principale del routing di React.
• Link permette di navigare verso un'altra pagina dell'applicazione. Funziona in modo simile ad un normale elemento <a> con un attributo href.

Routing e codice

Passiamo al codice. Apriamo il file App.js e sostituiamo il codice esistente con il seguente listato:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Blog from "./components/Blog";
import Post from "./components/Post";
import './App.css';
export default function App() {
	return (
		<BrowserRouter>
			<div className="container">
				<Routes>
					<Route
						path="/"
						element={<Blog />}
					/>
					<Route
						path='/post/:slug'
						element={<Post />}
					/>
				</Routes>
			</div>
		</BrowserRouter>
	);
}

Abbiamo importato i componenti BrowserRouter, Routes e Route dal pacchetto react-router-dom. Abbiamo poi importato i componenti Blog e Post, oltre al file .css dell'applicazione.

Nel codice JSX abbiamo utilizzato gli elementi messi a disposizione dalla libreria React Router.

• BrowserRouter è il contenitore che contiene tutti gli elementi dell'App;
• Routes racchiude una serie di singoli elementi Route;
• Route individua una singola route.

All'elemento Route abbiamo assegnato due attributi:

• path: è il percorso da confrontare con l'URL per stabilire se la route corrisponde a un URL, ad un href di un link, o ad un'azione di un modulo.
• element: è l'elemento o il componente React da rendere quando la route corrisponde all'URL. In questo caso abbiamo due elementi Route, il primo associato al componente <Blog />, il secondo al componente <Post />.

Abbiamo assegnato all'attributo path del secondo elemento Route il valore '/post/:slug'. A differenza del valore assegnato al path del primo elemento Route, questo secondo valore rappresenta un segmento dinamico.

Secondo quanto riportato nella documentazione di React Router:

Se un segmento di percorso inizia con : allora diventa un "segmento dinamico". Quando il percorso corrisponde all'URL, il segmento dinamico verrà analizzato dall'URL e fornito tramite params ad altre API del router.

Nel nostro codice, il segmento dinamico del path è slug. Per maggiori informazioni sui segmenti dinamici, si consulti la documentazione online. La struttura generale della nostra SPA è definita. Nella prossima lezione analizzeremo il codice dei due componenti Blog e Post.