Formatage d'URL et Routing dans React- Un guide d'utilisation React Router

Dans une application React, le formatage des URL routing joue un rôle crucial dans la navigation des pages et l'affichage du contenu correspondant. Pour gérer routing dans React, nous pouvons utiliser la bibliothèque. Voici un guide de base sur la façon d'utiliser pour formater les URL et les gérer dans votre application React. React Router React Router routing

 

Installer React Router

Ouvrez votre répertoire de projet dans le terminal et exécutez la commande suivante pour installer: React Router npm install react-router-dom

Importez les composants nécessaires depuis votre composant React. React Router

 

Définir les itinéraires

Utilisez le composant pour envelopper votre application React et définir un format d'URL de base. <BrowserRouter>

Utilisez le <Route> composant pour définir des routes dans votre application.

Exemple:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}  

 

Définir Link s

Utilisez le composant pour créer des navigations dans votre application. <Link> link

Exemple:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}  

 

Paramètres de chemin d'accès

Utilisez le <Route> composant avec un path attribut au format /users/:id pour accéder aux paramètres de chemin.

Dans le composant défini par <Route>, vous pouvez utiliser useParams() pour accéder aux valeurs des paramètres de chemin.

Exemple:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}  

 

Utiliser Switch et Redirect

Utilisez le composant pour rendre uniquement le premier itinéraire qui correspond au chemin. <Switch>

Utilisez le composant pour les utilisateurs d'un chemin spécifié à un autre. <Redirect> redirect

Exemple:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}  

 

Ce sont quelques concepts de base du formatage d'URL et routing de React en utilisant. En utilisant, vous pouvez créer des applications React flexibles avec la possibilité de naviguer et d'afficher divers contenus en fonction de l'URL. React Router React Router