React Router : Introduction rapide à useParams

Qu'est-ce que c'est useParams?

useParams est un crochet de routeur React qui vous permet d'accéder aux paramètres dynamiques dans l'URL.

useParamsrenvoie un objet de paires clé:valeur de paramètres d'URL. Le keyest le nom que vous avez attribué dans l'URL ; l' valueest ce qui est passé dans.

Comment utilisons-nous useParams?

• Importer useParamsdepuis react-router-dom.
• Remplacez la partie de la à pathlaquelle vous souhaitez accéder en paramètre par deux points et un identifiant de votre choix. Si vous aviez un chemin qui vous montrait le specialset le specialschangeait tous les jours, votre chemin ressemblerait à ceci : /specials/:currentDay, où currentDayest dynamique en fonction du jour.
• Déclarez ce même nom de variable dans le composant où vous gérerez les paramètres, en utilisant la syntaxe let { currentDay } = useParams();.
• Vous pouvez accéder à plusieurs paramètres dans une même URL, par exemple /specials/:currentDay/:birthdaySpecial, et vous pouvez utiliser une syntaxe de déstructuration pour les déclarer, comme ceci : let { currentDay, birthdaySpecial } = useParams();.
• Les paramètres sont obligatoires par défaut. Si vous souhaitez que votre paramètre soit en option, il suffit d' ajouter un ?après dans la path, comme ceci: /specials/:currentDay/:birthdaySpecial?. (N'oubliez pas que vous devrez gérer cette condition dans votre composant!)

import { BrowserRouter, Route, Switch, useParams } from "react-router-dom";
const App = () => {
  return (
    <BrowserRouter>
      <div>
        <h1>All About Pizza</h1>
        <Switch>
          <Route path="/" exact>
            <Home />
          </Route>
          <Route path="/toppings">
            <Toppings />
          </Route>
          <Route path="/specials/:currentDay">
            <Specials />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  )
}
export default App;