React Router: краткое введение в useParams

Что есть useParams?

useParams - это перехватчик React Router Hook, который позволяет вам получать доступ к динамическим параметрам в URL-адресе.

useParamsвозвращает объект пар ключ: значение параметров URL. keyЭто имя вы назначили в URL; valueто , что передается в.

Как мы используем useParams?

• Импорт useParamsиз react-router-dom.
• Замените часть, к pathкоторой вы хотите получить доступ в качестве параметра, двоеточием и идентификатором по вашему выбору. Если бы у вас был путь, который показывал вам, что specialsи что specialsменяется каждый день, ваш путь выглядел бы примерно так:, /specials/:currentDayгде currentDayявляется динамическим в зависимости от дня.
• Объявите то же имя переменной в компоненте, в котором вы будете управлять параметрами, используя синтаксис let { currentDay } = useParams();.
• Вы можете получить доступ к нескольким Params в одном URL, например /specials/:currentDay/:birthdaySpecial, и вы можете использовать синтаксис деструктурирующие объявить их, как это: 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;