React Router: useParams の簡単な紹介

何ですかuseParams？

useParams URL の動的パラメータにアクセスできる React Router Hook です。

useParamsURL パラメータの key:value ペアのオブジェクトを返します。keyあなたがURLに割り当てた名前です。valueに渡されているものです。

どのように使用しuseParamsますか?

• useParamsからインポートしreact-router-domます。
• pathパラメータとしてアクセスしたい部分を、コロンと選択した識別子に置き換えます。あなたはあなたに示したパスがあった場合specialsやspecials：毎日交換し、あなたのパスは次のようなものになり/specials/:currentDay、currentDayダイナミック日に基づいていますが。
• 構文を使用して、パラメーターを管理するコンポーネントで同じ変数名を宣言しますlet { currentDay } = useParams();。
• たとえば/specials/:currentDay/:birthdaySpecial、1 つの URL で複数のパラメータにアクセスできますlet { currentDay, birthdaySpecial } = useParams();。また、次のように、構造化構文を使用してそれらを宣言できます。
• パラメータはデフォルトで必須です。パラメータをオプションにしたい場合?はpath、次のように の後に を追加します/specials/:currentDay/:birthdaySpecial?。(コンポーネントでこの条件を処理する必要があることに注意してください!)

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;