react路由01——react-routerV6 中路由传递参数的几种方式

在React Router V6中，可以通过以下几种方式传递参数：

1. 使用URL参数（动态路由）：

<Route path="user/:id" element={<User />} />

在User组件中，可以使用useParams钩子获取参数：

import { useParams } from 'react-router-dom';
 
function User() {
  let { id } = useParams();
  return <div>User ID: {id}</div>;
}

2. 使用查询参数（查询字符串）：

   在链接中添加查询参数：

<Link to="/user?id=123">User 123</Link>

在User组件中，可以使用useSearchParams钩子获取参数：

import { useSearchParams } from 'react-router-dom';
 
function User() {
  let [searchParams] = useSearchParams();
  let id = searchParams.get('id');
  return <div>User ID: {id}</div>;
}

3. 使用状态管理（如Redux或Context API）来传递参数：

   这种方式不依赖于React Router，但可以在组件间共享数据。

4. 使用state属性在导航时传递参数：

navigate('/user', { state: { id: 123 } });

在User组件中，可以通过location对象获取参数：

import { useLocation } from 'react-router-dom';
 
function User() {
  let location = useLocation();
  let id = location.state?.id;
  return <div>User ID: {id}</div>;
}

以上方法可以根据需求选择适合的方式进行参数传递。