Solid Router : Maîtriser la navigation côté client dans SolidJS

SolidJS, reconnu pour ses performances exceptionnelles et sa simplicité, offre une base fantastique pour la création d'applications web modernes. Pour créer des expériences vraiment engageantes et conviviales, un routeur côté client robuste est essentiel. Voici Solid Router, le routeur officiel et recommandé pour SolidJS, conçu pour s'intégrer de manière transparente avec les principes réactifs du framework.

Ce guide complet plongera dans le monde de Solid Router, couvrant tout, de la configuration de base aux techniques avancées pour la création d'applications monopages (SPA) complexes et dynamiques. Que vous soyez un développeur SolidJS chevronné ou que vous débutiez, cet article vous dotera des connaissances et des compétences nécessaires pour maîtriser la navigation côté client.

Qu'est-ce que Solid Router ?

Solid Router est un routeur côté client léger et performant, spécialement conçu pour SolidJS. Il exploite la réactivité de SolidJS pour mettre à jour efficacement l'interface utilisateur en fonction des changements de l'URL du navigateur. Contrairement aux routeurs traditionnels qui reposent sur la comparaison du DOM virtuel (virtual DOM diffing), Solid Router manipule directement le DOM, ce qui se traduit par des performances plus rapides et plus prévisibles.

Les fonctionnalités clés de Solid Router incluent :

• Routage déclaratif : Définissez vos routes en utilisant une API simple et intuitive basée sur JSX.
• Routage dynamique : Gérez facilement les routes avec des paramètres, vous permettant de créer des applications dynamiques et pilotées par les données.
• Routes imbriquées : Organisez votre application en sections logiques avec des routes imbriquées.
• Composant de lien : Naviguez de manière transparente entre les routes en utilisant le composant <A>, qui gère automatiquement les mises à jour de l'URL et le style des liens actifs.
• Chargement de données : Chargez des données de manière asynchrone avant d'afficher une route, garantissant une expérience utilisateur fluide.
• Transitions : Créez des transitions visuellement attrayantes entre les routes pour améliorer l'expérience utilisateur.
• Gestion des erreurs : Gérez les erreurs avec élégance et affichez des pages d'erreur personnalisées.
• Intégration de l'API History : S'intègre de manière transparente avec l'API History du navigateur, permettant aux utilisateurs de naviguer à l'aide des boutons précédent et suivant.

Démarrer avec Solid Router

Installation

Pour installer Solid Router, utilisez votre gestionnaire de paquets préféré :

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

Configuration de base

Le cœur de Solid Router tourne autour des composants <Router> et <Route>. Le composant <Router> agit comme la racine du système de routage de votre application, tandis que les composants <Route> définissent la correspondance entre les URL et les composants.

Voici un exemple de base :

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Dans cet exemple, le composant <Router> encapsule toute l'application. Les composants <Route> définissent deux routes : une pour le chemin racine ("/") et une autre pour le chemin "/about". Lorsque l'utilisateur navigue vers l'un de ces chemins, le composant correspondant (Home ou About) sera affiché.

Le composant <A>

Pour naviguer entre les routes, utilisez le composant <A> fourni par Solid Router. Ce composant est similaire à une balise HTML <a> standard, mais il gère automatiquement les mises à jour de l'URL et empêche le rechargement complet de la page.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

Lorsque l'utilisateur clique sur l'un de ces liens, Solid Router mettra à jour l'URL du navigateur et affichera le composant correspondant sans déclencher un rechargement complet de la page.

Techniques de routage avancées

Routage dynamique avec des paramètres de route

Solid Router prend en charge le routage dynamique, vous permettant de créer des routes avec des paramètres. Ceci est utile pour afficher du contenu basé sur un ID ou un slug spécifique.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Dans cet exemple, le segment :id dans le chemin est un paramètre de route. Pour accéder à la valeur du paramètre id dans le composant UserProfile, vous pouvez utiliser le hook useParams :

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Le hook useParams renvoie un objet contenant les paramètres de la route. Dans ce cas, params.id contiendra la valeur du paramètre id de l'URL. Le hook createResource est ensuite utilisé pour récupérer les données de l'utilisateur en fonction de l'ID.

Exemple international : Imaginez une plateforme de e-commerce mondiale. Vous pourriez utiliser le routage dynamique pour afficher les détails d'un produit en fonction de son ID : /products/:productId. Cela vous permet de créer facilement des URL uniques pour chaque produit, facilitant ainsi le partage et la mise en favori d'articles spécifiques par les utilisateurs, quel que soit leur emplacement.

Routes imbriquées

Les routes imbriquées vous permettent d'organiser votre application en sections logiques. C'est particulièrement utile pour les applications complexes avec plusieurs niveaux de navigation.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Dans cet exemple, le composant <Dashboard> agit comme un conteneur pour les composants <Profile> et <Settings>. Les routes <Profile> et <Settings> sont imbriquées dans la route <Dashboard>, ce qui signifie qu'elles ne seront affichées que lorsque l'utilisateur se trouve sur le chemin "/dashboard".

Pour afficher les routes imbriquées dans le composant <Dashboard>, vous devez utiliser le composant <Outlet> :

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

Le composant <Outlet> agit comme un espace réservé (placeholder) où les routes imbriquées seront affichées. Lorsque l'utilisateur navigue vers "/dashboard/profile", le composant <Profile> sera affiché dans le composant <Outlet>. De même, lorsque l'utilisateur navigue vers "/dashboard/settings", le composant <Settings> sera affiché dans le composant <Outlet>.

Chargement des données avec createResource

Le chargement asynchrone des données avant d'afficher une route est crucial pour offrir une expérience utilisateur fluide. Solid Router s'intègre de manière transparente avec le hook createResource de SolidJS, ce qui facilite grandement le chargement des données.

Nous avons vu un exemple de cela dans le composant UserProfile plus tôt, mais le voici à nouveau pour plus de clarté :

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Le hook createResource prend deux arguments : un signal qui déclenche le chargement des données et une fonction qui récupère les données. Dans ce cas, le signal est () => params.id, ce qui signifie que les données seront récupérées chaque fois que le paramètre id change. La fonction fetchUser récupère les données de l'utilisateur à partir d'une API en fonction de l'ID.

Le hook createResource renvoie un tableau contenant la ressource (les données récupérées) et une fonction pour récupérer à nouveau les données. La ressource est un signal qui contient les données. Vous pouvez accéder aux données en appelant le signal (user()). Si les données sont toujours en cours de chargement, le signal renverra undefined. Cela vous permet d'afficher un indicateur de chargement pendant que les données sont récupérées.

Transitions

L'ajout de transitions entre les routes peut améliorer considérablement l'expérience utilisateur. Bien que Solid Router n'ait pas de support de transition intégré, il s'intègre bien avec des bibliothèques comme solid-transition-group pour obtenir des transitions fluides et visuellement attrayantes.

D'abord, installez le paquet solid-transition-group :

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

Ensuite, encapsulez vos routes avec le composant <TransitionGroup> :

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Dans cet exemple, chaque route est encapsulée avec un composant <Transition>. La prop name spécifie le préfixe de la classe CSS pour la transition, et la prop duration spécifie la durée de la transition en millisecondes.

Vous devrez définir les classes CSS correspondantes pour la transition dans votre feuille de style :

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

Ce code CSS définit une simple transition de fondu (fade-in/fade-out). Lorsqu'une route est entrée, les classes .fade-enter et .fade-enter-active sont appliquées, provoquant l'apparition en fondu du composant. Lorsqu'une route est quittée, les classes .fade-exit et .fade-exit-active sont appliquées, provoquant la disparition en fondu du composant.

Gestion des erreurs

La gestion correcte des erreurs est essentielle pour offrir une bonne expérience utilisateur. Solid Router n'a pas de gestion d'erreurs intégrée, mais vous pouvez facilement l'implémenter en utilisant une `ErrorBoundary` globale ou un gestionnaire d'erreurs spécifique à une route.

Voici un exemple d'une `ErrorBoundary` globale :

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Quelque chose s'est mal passé : {error()?.message}</p>}>
      <Suspense fallback={<p>Chargement...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Le composant <ErrorBoundary> intercepte toutes les erreurs qui se produisent dans ses enfants. La prop fallback spécifie le composant à afficher lorsqu'une erreur se produit. Dans ce cas, il affiche un paragraphe avec le message d'erreur.

Le composant <Suspense> gère les promesses en attente, généralement utilisé avec des composants asynchrones ou le chargement de données. Il affiche la prop `fallback` jusqu'à ce que les promesses se résolvent.

Pour déclencher une erreur, vous pouvez lancer une exception dans un composant :

            function Home() {
  throw new Error('Échec du chargement de la page d\'accueil');

  return <h1>Accueil</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Lorsque ce code est exécuté, le composant <ErrorBoundary> interceptera l'erreur et affichera le composant de secours.

Considérations internationales : Lors de l'affichage des messages d'erreur, pensez à l'internationalisation (i18n). Utilisez une bibliothèque de traduction pour fournir des messages d'erreur dans la langue préférée de l'utilisateur. Par exemple, si un utilisateur au Japon rencontre une erreur, il devrait voir le message d'erreur en japonais, pas en anglais.

Meilleures pratiques pour l'utilisation de Solid Router

• Gardez vos routes organisées : Utilisez des routes imbriquées pour organiser votre application en sections logiques. Cela facilitera la maintenance et la navigation dans votre code.
• Utilisez les paramètres de route pour le contenu dynamique : Utilisez les paramètres de route pour créer des URL dynamiques afin d'afficher du contenu basé sur un ID ou un slug spécifique.
• Chargez les données de manière asynchrone : Chargez les données de manière asynchrone avant d'afficher une route pour offrir une expérience utilisateur fluide.
• Ajoutez des transitions entre les routes : Utilisez des transitions pour améliorer l'expérience utilisateur et donner à votre application une apparence plus soignée.
• Gérez les erreurs correctement : Mettez en œuvre la gestion des erreurs pour intercepter et afficher les erreurs de manière conviviale.
• Utilisez des noms de route descriptifs : Choisissez des noms de route qui reflètent précisément le contenu de la route. Cela facilitera la compréhension de la structure de votre application.
• Testez vos routes : Écrivez des tests unitaires pour vous assurer que vos routes fonctionnent correctement. Cela vous aidera à détecter les erreurs tôt et à prévenir les régressions.

Conclusion

Solid Router est un routeur côté client puissant et flexible qui s'intègre de manière transparente avec SolidJS. En maîtrisant ses fonctionnalités et en suivant les meilleures pratiques, vous pouvez créer des applications monopages complexes et dynamiques qui offrent une expérience utilisateur fluide et engageante. De la configuration de base aux techniques avancées comme le routage dynamique, le chargement de données et les transitions, ce guide vous a fourni les connaissances et les compétences nécessaires pour naviguer avec confiance dans le monde de la navigation côté client avec SolidJS. Adoptez la puissance de Solid Router et libérez tout le potentiel de vos applications SolidJS !

N'oubliez pas de consulter la documentation officielle de Solid Router pour les informations et les exemples les plus à jour : [Lien vers la documentation de Solid Router - Espace réservé]

Continuez à créer des choses incroyables avec SolidJS !