Comment définissez-vous les itinéraires en utilisant le & lt; Route & gt; composant?

Comment définissez-vous les itinéraires à l'aide du composant ?

Pour définir des itinéraires à l'aide du composant <route></route> dans le routeur React, vous l'utilisez principalement dans un composant de routeur, tel que <browserrouter></browserrouter> ou <hashrouter></hashrouter> . Le composant <route></route> est responsable du rendu de l'interface utilisateur lorsque son path correspond à l'URL actuelle. Voici comment l'utiliser:

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> <route path="/contact" component="{Contact}"></route> </div> </browserrouter> ); }</code>

Dans cet exemple, trois itinéraires sont définis:

• L'itinéraire domestique ("/") rendra le composant Home .
• La route à peu près ("/ à propos") rendra le composant About .
• La route de contact ("/ contact") rendra le composant Contact .

Le composant <route></route> peut être utilisé de différentes manières pour passer le composant à rendre:

• Utilisation de l'hélice component directement comme indiqué ci-dessus.
• Utilisation de l'hélice render , qui vous permet de rendre un composant en ligne avec des accessoires supplémentaires.
• Utilisation de l'hélice children , qui peut rendre un composant, peu importe si son chemin correspond ou non l'URL actuelle.

Quels sont les différents accessoires qui peuvent être utilisés avec le composant ?

Le composant <route></route> du routeur React prend en charge plusieurs accessoires qui définissent son comportement et la logique de rendu. Voici les principaux accessoires:

• path : une chaîne ou un tableau de chaînes que l'itinéraire doit correspondre. S'il n'est pas spécifié, l'itinéraire correspondra toujours.
• component : un composant React pour rendre lorsque l'emplacement correspond au path . Cet accessoire s'exclut mutuellement avec render et children .
• render : une fonction qui renvoie un élément React à Render lorsque l'emplacement correspond. Utile lorsque vous devez transmettre des accessoires supplémentaires au composant ou que vous devez effectuer un rendu en ligne.
• children : une fonction qui renvoie un élément de réaction. Il rend ou non que l'itinéraire correspond ou non au chemin, ce qui le rend utile pour les animations ou d'autres situations où vous souhaitez rendre quelque chose quel que soit l'emplacement actuel.
• exact : un booléen qui, lorsqu'il est vrai, ne fera que l'itinéraire ne correspondra que si tout le chemin d'URL correspond, pas seulement un préfixe.
• strict : Un booléen qui, lorsqu'il est vrai, rendra la tronçonneuse traînante sur le path significatif.
• location : un objet représentant l'emplacement actuel. Ceci est généralement utilisé pour les routeurs imbriqués.
• sensitive : un booléen qui, lorsqu'il est vrai, rendra la route sensible à la casse.

En utilisant ces accessoires, vous pouvez configurer le composant <route></route> pour répondre à divers besoins de routage dans votre application.

Comment le composant gère-t-il les itinéraires imbriqués?

Le composant <route></route> du routeur React prend en charge les voies imbriquées à travers le concept de routage imbriqué, ce qui permet des structures de routage plus complexes et organisées. Voici comment vous pouvez implémenter des itinéraires imbriqués:

1. Définissez l'itinéraire parent : commencez par définir l'itinéraire principal qui contiendra les itinéraires imbriqués.
2. Utilisez les children PROP : Dans le composant de la route parent, vous pouvez utiliser des composants <route></route> supplémentaires pour définir les itinéraires imbriqués. Cela peut être fait en utilisant l'hélice children ou en définissant les routes imbriquées directement dans le composant parent.

Voici un exemple de routage imbriqué:

 <code class="jsx">import { BrowserRouter, Route, Link } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/users" component="{Users}"></route> </div> </browserrouter> ); } function Users({ match }) { return ( <div> <h2>Users</h2> <ul> <li>
<link to="{`${match.url}/user1`}">User1</li> <li>
<link to="{`${match.url}/user2`}">User2</li> </ul> <route path="{`${match.path}/:userId`}" component="{User}"></route> </div> ); } function User({ match }) { return <h3>User {match.params.userId}</h3>; }</code>

Dans cet exemple, la route /users rend le composant Users , qui utilise ensuite une <route></route> imbriquée pour définir une route pour les utilisateurs spécifiques (par exemple, /users/user1 ). L'objet match , passé comme un accessoire, aide à construire des URL relatives pour les routes imbriquées.

Pouvez-vous expliquer comment utiliser l'hélice «exacte» avec le composant ?

L'hélice exact est utilisée avec le composant <route></route> pour s'assurer que le chemin de route correspond à l'ensemble du chemin d'URL, plutôt que de simplement faire correspondre le début de celui-ci. Ceci est particulièrement utile lorsque vous souhaitez éviter les matchs involontaires.

Voici comment vous pouvez utiliser l'hélice exact :

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route exact path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> </div> </browserrouter> ); }</code>

Dans cet exemple:

• L'itinéraire avec le chemin "/" utilise l'hélice exact . Cela signifie qu'il ne correspondra qu'à l'URL racine ( "/" ) et non aux URL comme "/about" .
• Sans l'accessoire exact , la route domestique ( "/" ) correspondrait également aux URL comme "/about" , ce qui n'est généralement pas ce que vous voulez.

L'hélice exact devient particulièrement importante lors de la définition de routes plus spécifiques sous une plus générale. Par exemple, si vous avez un itinéraire pour un tableau de bord ( "/dashboard" ) et un autre pour une section spécifique dans le tableau de bord ( "/dashboard/settings" ), vous voudrez peut-être que l'itinéraire du tableau de bord utilise exact pour l'empêcher de correspondre également à l'itinéraire des paramètres.

En résumé, l'hélice exact garantit une correspondance précise du chemin de route vers l'URL actuelle, en évitant les correspondances involontaires avec des chemins plus spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!