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 path
nous 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 Dashboard
nous 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.
Source link