Roteador React: uma introdução rápida ao useParams

O que é useParams?

useParams é um React Router Hook que permite acessar parâmetros dinâmicos na URL.

useParamsretorna um objeto de pares chave: valor de parâmetros de URL. O keyé o nome que você atribuiu no URL; o valueé o que está sendo passado.

Como usamos useParams?

• Importar useParamsde react-router-dom.
• Substitua a parte do pathque você gostaria de acessar como parâmetro por dois pontos e um identificador de sua escolha. Se você tivesse um caminho que mostrasse o specialse o specialsmudasse todos os dias, seu caminho seria algo assim:, /specials/:currentDayonde currentDayé dinâmico com base no dia.
• Declare esse mesmo nome de variável no componente onde irá gerenciar os parâmetros, usando a sintaxe let { currentDay } = useParams();.
• Você pode acessar vários parâmetros em um URL, por exemplo /specials/:currentDay/:birthdaySpecial, e você pode usar a sintaxe desestruturação declará-los, como este: let { currentDay, birthdaySpecial } = useParams();.
• Os parâmetros são obrigatórios por padrão. Se você gostaria que seu parâmetro para ser opcional, basta adicionar um ?depois na path, como este: /specials/:currentDay/:birthdaySpecial?. (Lembre-se de que você terá que lidar com essa condição em seu componente!)

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;