react route v6 传参

在 React Router V6 中，传递参数有两种常用的方式：通过路由参数和通过查询参数。

1. 通过路由参数：
使用 `<Route>` 组件可以在路径定义中指定动态参数。例如，我们可以在路由定义中指定一个参数 `:id`：

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

   function App() {
     return (
       <div>
         <Route path="/users/:id" element={<User />} />
       </div>
     );
   }

   function User() {
     // 使用 useParams 钩子来获取路由参数
     const { id } = useParams();

     // 根据参数渲染相应的内容
     return <div>User ID: {id}</div>;
   }

在上面的例子中，当访问 `/users/123` 时，参数 `id` 将被设置为 `123`。

2. 通过查询参数：
查询参数是指在 URL 中通过 `?` 后附加的键值对。我们可以使用 `useLocation` 钩子来获取当前路径的查询参数，然后使用 `URLSearchParams` 对象来解析参数。例如：

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

   function App() {
     const location = useLocation();
     const searchParams = new URLSearchParams(location.search);

     const id = searchParams.get('id');

     return <div>User ID: {id}</div>;
   }

在上面的例子中，当访问 `/users?id=123` 时，参数 `id` 将被设置为 `123`。

通过以上两种方式，我们可以在 React Router V6 中方便地传递参数，并根据参数的值来渲染相应的内容。