Как использовать динамическую маршрутизацию в ReactJS с двоеточием

Question

Я хочу изменить свою маршрутизацию в соответствии с идентификатором продукта, который является динамическим.

Я нашел это решение переменных, используя двоеточие.

path: "/:product_id" component: ProductDetail

Как я могу использовать product_idв моих компонентах.

Answer 1

Как объяснено в документации , вы можете получить доступ к данным из params объекта match prop.

В вашем случае это будетбыть: match.params.product_id.Например:

function ProductDetail({ match }) {
  return (
    <div>
      <h3>PID: {match.params.product_id}</h3>
    </div>
  );
}