如何在 Route React 中传递 id

Question

当我想从产品列表中按 ID 查看产品时，我想构建一个页面。在我的应用程序文件中，我有类似的东西：

<Route path={ROUTES.product} element={<Product id={1} />}>

但我想用来自所选产品的值替换静态 ID。在我的产品文件中，我已重定向到包含产品的页面，但我不知道如何传递 ID。

onClick={() => { navigate(`/products/${product?.id}`)}}

如有任何帮助，我们将不胜感激。

Answer 1

onClick={ () => Navegar(id) }
function Navegar(id) {
    navigate('/products/id)
}

Answer 2

所以你已经有了这个ID

navigate(`/products/${product?.id}`)

仅在 Product 组件中，您可以使用

访问 id

 const { id } = useParams();

如果您需要传递额外的数据，您可以尝试：

navigate(`/product/${product?.id}`, { state: { someExtradata }};

您可以通过以下方式访问组件中的状态：

 const { state } = useLocation();

Answer 3

您提供的代码似乎传递了路径中的 id 值。您的问题似乎更多是关于让 Product 组件将正确的 id 道具传递给它。

给定：路径是 "/products/:id"

访问 id 参数的选项：

使用 Product 中的 useParams 钩子读取 id 路由路径参数。这仅在 Product 是函数组件时有效。

import { useParams } from 'react-router-dom';

...

const { id } = useParams();

...

<Route path={ROUTES.product} element={<Product />} />

使用包装器组件使用 useParams 钩子并将 id 值作为道具注入。如果 Product 不是函数组件，这很有用。

import { useParams } from 'react-router-dom';

const ProductWrapper = () = {
  const { id } = useParams();
  return <Product id={id} />
};

...

<Route path={ROUTES.product} element={<ProductWrapper />} />

创建自定义 withRouter 高阶组件以使用 useParams 挂钩并注入 params 属性。

import { useParams, ...other hooks... } from 'react-router-dom';

const withRouter = Component => props => {
  const params = useParams();
  ... other hooks...
  return (
    <Component
      {...props}
      params={params}
      ... other hooks ...
    />
  );
};

...

用 withRouter HOC 包装 Product 并从 props.params

访问 id 参数

props.params.id // or this.props.params

...

export default withRouter(Product);

...

<Route path={ROUTES.product} element={<Product />} />

如何在 Route React 中传递 id

How to pass id in Route React

reactjs

react-router