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 BrowserRouter
• Routes
• Route
• Link <a> 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 Route react-router-dom Blog Post .css

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

• BrowserRouter
• Routes Route
• Route

All'elemento Route abbiamo assegnato due attributi:

• path href
• element <Blog /> <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 : params

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.