Comment utiliser React Router v6

React Router nous permet d’acheminer vers différentes « pages » même sur une application d’une seule page. Apprenez à l’implémenter et à styliser ses liens.

La plupart des applications frontales ont plus d’une page de contenu. Dans une application monopage, nous ajoutons plusieurs pages de données en acheminant des URL pour afficher différents contenus.

React n’a pas de bibliothèque de routage intégrée. Par conséquent, nous devons en ajouter une nous-mêmes.

React Router est une bibliothèque de routage populaire pour les applications React. Dans cet article, nous verrons comment utiliser React Router v6 pour ajouter des fonctionnalités de routage à nos applications React.

Utilisation de base

Pour l’utiliser, nous installons le react-router-dom emballer.

Pour ce faire, nous exécutons :

npm i react-router-dom

Puis nous écrivons :

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js

import * as React from "react";
import { createBrowserRouter, RouterProvider, Link } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "https://www.telerik.com/",
    element: (
      <div>
        <Link to="about">About Us</Link>
        <div>Hello World</div>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

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

Nous appelons createBrowserRouter pour créer un objet routeur. Nous l’appelons avec un éventail d’itinéraires.

Le path est mappé sur le element étant rendu. Par conséquent, lorsque nous allons au pathnous voyons le contenu dans element rendu.

Le Link Le composant est utilisé pour restituer un lien. Et le to prop est défini sur l’URL de la route que nous voulons parcourir dans l’application.

Nous utilisons RouterProvider avec le router accessoire réglé sur router pour afficher les itinéraires lorsque nous accédons aux URL répertoriées dans le path propriétés.

Nous pouvons également ajouter facilement des itinéraires imbriqués. Pour ce faire, nous pouvons imbriquer les routes dans le children tableau.

Par exemple, nous écrivons :

App.js

import * as React from "react";
import {
  createBrowserRouter,
  RouterProvider,
  redirect,
  Outlet,
  useLoaderData,
} from "react-router-dom";

const Dashboard = () => {
  const data = useLoaderData();
  return <div>dashboard {JSON.stringify(data)}</div>;
};

const router = createBrowserRouter([
  {
    path: "https://www.telerik.com/",
    element: (
      <div>
        hello <Outlet />
      </div>
    ),
    children: [
      {
        path: "contact",
        element: <div>contact</div>,
      },
      {
        path: "dashboard",
        element: <Dashboard />,
        loader: ({ request }) =>
          fetch("https://yesno.wtf/api", {
            signal: request.signal,
          }),
      },
      {
        element: (
          <div>
            auth <Outlet />
          </div>
        ),
        children: [
          {
            path: "login",
            element: <div>login</div>,
          },
          {
            path: "logout",
            action: <div>logout</div>,
            loader: () => redirect("/login"),
          },
        ],
      },
    ],
  },
]);

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

pour ajouter des itinéraires imbriqués en les plaçant dans le children tableau. Nous utilisons le Outlet composant pour restituer le contenu des routes imbriquées.

loader est défini sur une fonction qui renvoie une promesse.

request.signal est un objet signal d’abandon que nous pouvons utiliser pour annuler la demande si nous le souhaitons.

Pour obtenir la valeur renvoyée par la promesse, nous utilisons le useLoaderData crochet. Dans Dashboardnous l’appelons simplement pour obtenir les données renvoyées.

Nous ajoutons une autre route imbriquée dans le dernier children tableau avec le login et logout itinéraires. Dans le logout itinéraire, nous redirigeons vers le login itinéraire avec le redirect fonction.

Segments d’espace réservé d’itinéraire

Nous pouvons ajouter des segments d’espace réservé d’itinéraire en les commençant par des points-virgules.

Par exemple, nous écrivons :

import * as React from "react";
import {
  createBrowserRouter,
  RouterProvider,
  Outlet,
  useLoaderData,
  useParams,
} from "react-router-dom";

const Dashboard = () => {
  const data = useLoaderData();
  const params = useParams();
  return (
    <div>
      dashboard {JSON.stringify(data)} {JSON.stringify(params)}
    </div>
  );
};

const router = createBrowserRouter([
  {
    path: "https://www.telerik.com/",
    element: (
      <div>
        hello <Outlet />
      </div>
    ),
    children: [
      {
        path: "dashboard/:parentId/child/:childId",
        element: <Dashboard />,
        loader: ({ params }) => {
          return params;
        },
      },
    ],
  },
]);

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

pour ajouter le :parentId et :childId espaces réservés d’itinéraire.

Ensuite, nous appelons useParams dans le Dashboard composant pour obtenir un objet avec le parentId et childId propriétés qui ont les paramètres d’itinéraire.

Le loader la fonction a également un params propriété dans l’objet paramètre. Et nous pouvons faire des choses avec ou le rendre. S’il est renvoyé, nous pouvons récupérer les valeurs useLoaderData comme nous faisons. Et le résultat est la même valeur que celle renvoyée par useParams.

Chaînes de requête

Nous pouvons obtenir et définir des chaînes de requête avec le useSearchParams crochet.

Pour ce faire, nous écrivons :

import * as React from "react";
import {
  createBrowserRouter,
  RouterProvider,
  Outlet,
  useSearchParams,
} from "react-router-dom";

const Dashboard = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  console.log(searchParams.toString());

  return (
    <button onClick={() => setSearchParams({ foo: 1, bar: 2 })}>go</button>
  );
};

const router = createBrowserRouter([
  {
    path: "https://www.telerik.com/",
    element: (
      <div>
        hello <Outlet />
      </div>
    ),
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
      },
    ],
  },
]);

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

pour ajouter le useSearchParams crochet au Dashboard composant.

Dans celui-ci, nous appelons useSearchParams pour renvoyer un tableau avec la fonction getter et setter.

Nous obtenons la valeur de la chaîne de requête avec searchParams et nous appelons setSearchParams pour définir la chaîne de requête.

searchParams est un habitué URLSearchParams objet intégré au navigateur afin que nous puissions appeler toString pour obtenir la chaîne de requête.

Nous appelons setSearchParams avec un objet avec les clés et les valeurs des paramètres de requête pour rediriger vers l’URL avec la chaîne de requête.

Liens actifs

React Router v6 est livré avec le NavLink composant qui nous permet de styliser facilement les liens selon que nous sommes sur la page vers laquelle il renvoie ou non.

Par exemple, on peut l’utiliser en écrivant :

import * as React from "react";
import {
  createBrowserRouter,
  RouterProvider,
  Outlet,
  NavLink,
} from "react-router-dom";

const Root = () => {
  return (
    <div>
      <NavLink
        style={({ isActive }) => {
          return {
            color: isActive ? "red" : "inherit",
          };
        }}
        className={({ isActive, isPending }) => {
          return isActive ? "active" : isPending ? "pending" : "";
        }}
        to="https://www.telerik.com/"
      >
        home
      </NavLink>
      <NavLink
        style={({ isActive }) => {
          return {
            color: isActive ? "red" : "inherit",
          };
        }}
        className={({ isActive, isPending }) => {
          return isActive ? "active" : isPending ? "pending" : "";
        }}
        to="dashboard"
      >
        dashboard
      </NavLink>
      <NavLink
        style={({ isActive }) => {
          return {
            color: isActive ? "red" : "inherit",
          };
        }}
        className={({ isActive, isPending }) => {
          return isActive ? "active" : isPending ? "pending" : "";
        }}
        to="contact"
      >
        contact
      </NavLink>
      <Outlet />
    </div>
  );
};

const router = createBrowserRouter([
  {
    path: "https://www.telerik.com/",
    element: <Root />,
    children: [
      {
        path: "https://www.telerik.com/",
        element: <div>home</div>,
      },
      {
        path: "dashboard",
        element: <div>dashboard</div>,
      },
      {
        path: "contact",
        element: <div>contact</div>,
      },
    ],
  },
]);

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

pour ajouter le Root composant.

Dans celui-ci, nous ajoutons NavLink des composants pour ajouter des liens que nous pouvons styliser selon que nous sommes sur la page vers laquelle le lien renvoie ou non.

Nous fixons le style prop à une fonction qui prend un objet avec le isActive propriété.

Si isActive est true, nous sommes alors sur la page vers laquelle le lien renvoie. Et nous définissons la couleur du lien sur rouge dans ce cas. Sinon, nous le définissons sur la couleur héritée par défaut.

Le isPending La propriété est également disponible dans le paramètre object afin que nous puissions vérifier si la navigation vers l’itinéraire est en attente.

De même, nous pouvons définir le className propriété à une fonction qui prend le même objet. Et nous pouvons renvoyer des chaînes de nom de classe pour le lien en fonction de l’état de navigation, comme nous le faisons avec la fonction que nous définissons comme valeur du style soutenir.

Nous pouvons maintenant voir que le lien devient rouge lorsque nous sommes sur la page vers laquelle le lien renvoie.

Conclusion

React Router est une bibliothèque de routage simple à utiliser que nous pouvons utiliser pour créer des applications React avec plusieurs pages. Il intègre toutes les fonctionnalités telles que la gestion des chaînes de requête et des paramètres d’URL. Nous pouvons également l’utiliser pour effectuer des opérations lors du chargement d’une route.

Et il propose également un moyen simple de restituer des liens vers différents itinéraires et de les styliser selon que nous sommes déjà sur la page liée ou non.