React Router: Pengantar Singkat untuk useParams

Apa itu useParams?

useParams adalah React Router Hook yang memungkinkan Anda mengakses parameter dinamis di URL.

useParamsmengembalikan objek pasangan kunci:nilai parameter URL. Itu keyadalah nama yang Anda tetapkan di URL; yang valueadalah apa yang sedang berlalu di.

Bagaimana kita menggunakan useParams?

• Impor useParamsdari react-router-dom.
• Ganti bagian pathyang ingin Anda akses sebagai parameter dengan titik dua dan pengenal pilihan Anda. Jika Anda memiliki jalur yang menunjukkan specialsdan specialsberubah setiap hari, jalur Anda akan terlihat seperti ini: /specials/:currentDay, di mana currentDaydinamis berdasarkan hari.
• Deklarasikan nama variabel yang sama di komponen tempat Anda akan mengelola params, menggunakan sintaks let { currentDay } = useParams();.
• Anda dapat mengakses beberapa parameter dalam satu url, misalnya /specials/:currentDay/:birthdaySpecial, dan Anda dapat menggunakan sintaks perusak untuk mendeklarasikannya, seperti ini: let { currentDay, birthdaySpecial } = useParams();.
• Parameter adalah wajib secara default. Jika Anda ingin parameter Anda menjadi opsional, cukup tambahkan ?setelahnya di path, seperti ini: /specials/:currentDay/:birthdaySpecial?. (Ingat bahwa Anda harus menangani kondisi ini di komponen Anda!)

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;