React Router: Giới thiệu nhanh về cách sử dụngParams

Là useParamsgì?

useParams là một React Router Hook cho phép bạn truy cập các tham số động trong URL.

useParamstrả về một đối tượng của các cặp tham số URL key: value. Các keylà tên mà bạn đã gán trong URL; những valuelà những gì đã được thông qua vào.

Làm thế nào để chúng tôi sử dụng useParams?

• Nhập useParamstừ react-router-dom.
• Thay thế phần pathmà bạn muốn truy cập dưới dạng tham số bằng dấu hai chấm và số nhận dạng mà bạn chọn. Nếu bạn đã có một con đường cho thấy bạn specialsvà specialsthay đổi mỗi ngày, con đường của bạn sẽ trông như thế này: /specials/:currentDay, nơi currentDayđược động dựa trên ngày.
• Khai báo cùng tên biến đó trong thành phần mà bạn sẽ quản lý các tham số, sử dụng cú pháp let { currentDay } = useParams();.
• Bạn có thể truy cập nhiều params trong một url, ví dụ /specials/:currentDay/:birthdaySpecial, và bạn có thể sử dụng cú pháp destructuring tuyên bố họ, như thế này: let { currentDay, birthdaySpecial } = useParams();.
• Các thông số là bắt buộc theo mặc định. Nếu bạn muốn tham số của bạn sẽ được tùy chọn, chỉ cần thêm một ?sau khi nó vào path, như thế này: /specials/:currentDay/:birthdaySpecial?. (Hãy nhớ rằng bạn sẽ phải xử lý điều kiện này trong thành phần của mình!)

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;