如何在React Route中传递id

Question

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

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

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

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

任何帮助，将不胜感激。

Answer 1

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

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

访问id参数的选项：

1. 使用useParams钩子Product来读取id路由路径参数。这只适用于Product函数组件。

   import { useParams } from 'react-router-dom';
   
   ...
   
   const { id } = useParams();
   

   ...

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

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

   import { useParams } from 'react-router-dom';
   
   const ProductWrapper = () = {
     const { id } = useParams();
     return <Product id={id} />
   };
   

   ...

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

3. 创建一个自定义的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 ...
       />
     );
   };
   

   ...

   Product用HOC包装withRouter并访问id参数props.params

   props.params.id // or this.props.params
   
   ...
   
   export default withRouter(Product);    
   

   ...

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