React Router: Krótkie wprowadzenie do useParams

Co to jest useParams?

useParams to React Router Hook, który umożliwia dostęp do parametrów dynamicznych w adresie URL.

useParamszwraca obiekt par klucz:wartość parametrów adresu URL. To keynazwa przypisana w adresie URL; to valuejest to, co jest przekazywane.

Jak używamy useParams?

• Importuj useParamsz react-router-dom.
• Zastąp część, do pathktórej chcesz uzyskać dostęp jako parametr, dwukropkiem i wybranym przez siebie identyfikatorem. Gdybyś miał ścieżkę, która pokazywałaby specialsi specialszmieniała się każdego dnia, twoja ścieżka wyglądałaby mniej więcej tak: /specials/:currentDay, gdzie currentDayjest dynamiczna w zależności od dnia.
• Zadeklaruj tę samą nazwę zmiennej w komponencie, w którym będziesz zarządzać parametrami, używając składni let { currentDay } = useParams();.
• Możesz uzyskać dostęp do wielu parametrów w jednym adresie URL, np. /specials/:currentDay/:birthdaySpecial, i możesz użyć składni destrukturyzowania do ich deklarowania, tak jak to: let { currentDay, birthdaySpecial } = useParams();.
• Parametry są domyślnie obowiązkowe. Jeśli chcesz, aby Twój parametr był opcjonalny, po prostu dodaj ?po nim w path, w ten sposób: /specials/:currentDay/:birthdaySpecial?. (Pamiętaj, że będziesz musiał poradzić sobie z tym stanem w swoim komponencie!)

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;