React Router: Eine kurze Einführung in useParams

Was ist useParams?

useParams ist ein React Router Hook, mit dem Sie auf dynamische Parameter in der URL zugreifen können.

useParamsgibt ein Objekt aus Schlüssel:Wert-Paaren von URL-Parametern zurück. Das keyist der Name, den Sie in der URL zugewiesen haben; das valuewird eingespeist.

Wie verwenden wir useParams?

• Importieren useParamsvon react-router-dom.
• Ersetzen Sie den Teil des, auf den pathSie als Parameter zugreifen möchten, durch einen Doppelpunkt und eine beliebige Kennung. Wenn Sie einen Pfad hätten, der Ihnen das specialsund das specialssich jeden Tag ändert, würde Ihr Pfad ungefähr so ​​aussehen: /specials/:currentDay, wobei currentDaydynamisch basierend auf dem Tag ist.
• Deklarieren Sie denselben Variablennamen in der Komponente, in der Sie die Parameter verwalten, mit der Syntax let { currentDay } = useParams();.
• Sie können auf mehrere Parameter in einer URL zugreifen, zB /specials/:currentDay/:birthdaySpecial, und Sie können Destrukturierungssyntax verwenden, um sie wie folgt zu deklarieren: let { currentDay, birthdaySpecial } = useParams();.
• Parameter sind standardmäßig obligatorisch. Wenn Sie möchten, dass Ihr Parameter optional ist, fügen ?Sie einfach einen nach ihm hinzu path, wie folgt: /specials/:currentDay/:birthdaySpecial?. (Denken Sie daran, dass Sie diese Bedingung in Ihrer Komponente behandeln müssen!)

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;