React Router 中如何传递路由参数？

推荐答案

在 React Router 中，可以通过以下两种方式传递路由参数：

1. 动态路由参数：在路由路径中使用 :paramName 的形式定义动态参数，然后在组件中通过 useParams 钩子获取参数值。

   // www.javascriptcn.com code example
   // 定义路由
   <Route path="/user/:userId" component={User} />
   
   // 在组件中获取参数
   import { useParams } from 'react-router-dom';
   
   function User() {
     const { userId } = useParams();
     return <div>User ID: {userId}</div>;
   }

2. 查询参数：通过 useLocation 钩子获取 URL 中的查询字符串，然后使用 URLSearchParams 解析查询参数。

   // www.javascriptcn.com code example
   // 在组件中获取查询参数
   import { useLocation } from 'react-router-dom';
   
   function User() {
     const location = useLocation();
     const queryParams = new URLSearchParams(location.search);
     const name = queryParams.get('name');
   
     return <div>Name: {name}</div>;
   }

本题详细解读

动态路由参数

动态路由参数是 React Router 中最常用的传递参数的方式之一。通过在路由路径中使用 :paramName 的形式定义动态参数，可以在组件中通过 useParams 钩子获取这些参数的值。这种方式适用于需要在 URL 中直接传递参数的场景，例如用户详情页、商品详情页等。

查询参数

查询参数是通过 URL 中的查询字符串传递的，通常用于传递可选参数或过滤条件。在 React Router 中，可以通过 useLocation 钩子获取当前的 location 对象，然后使用 URLSearchParams 解析查询字符串中的参数。这种方式适用于需要在 URL 中传递多个可选参数的场景，例如搜索页面、筛选页面等。

使用场景

• 动态路由参数：适用于需要在 URL 中直接传递参数的场景，如用户详情页、商品详情页等。
• 查询参数：适用于需要在 URL 中传递多个可选参数的场景，如搜索页面、筛选页面等。

注意事项

• 动态路由参数和查询参数可以结合使用，但需要根据具体需求选择合适的传递方式。
• 在使用查询参数时，注意处理参数不存在的情况，避免出现 undefined 或 null 的情况。