React Route路由的三种传参方式

一. 查询参数（useLocation+useSearchParams）

通过 URL 的查询字符串传参。

• 传值方式： ？后面代表的是传的参数值

import { useSeatchParams } from 'react-router';

const navigate = useNavigate();
navigate(`/notelist/category?title=${title}`)

接收方式：

import { useSearchParams } from 'react-router';

const [searchParams] = useSearchParams();
const title = searchParams.get('title');

或者

import { useLocation } from 'react-router';

const location = useLocation();
console.log(location);

• 优点：
  • 可以分享带参数的链接。
  • 刷新页面参数不丢失。
• 缺点：
  • 参数暴露在 URL 中，不适合传敏感信息。

---

二. 动态路由参数（Params）

通过定义带参数的路由路径传参。

• 路由配置：/home/:id"这个是指明路由后面可以携带一个参数id

  <Route path="/home/:id" element={<Home />} />
  

• 传值方式：

  navigate('/home/1');
  

• 接收方式：

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

• 适用场景：

  • 如文章详情页 /article/123，分类页 /category/react。

• 优点：

  • URL 更美观、语义化。

• 缺点：

  • 参数必须符合路由定义的结构。

---

三. 状态传递（State）

通过 navigate 的 state 选项传参，参数不会显示在 URL 中。

• 传值方式：

  navigate('/home', {
    state: { id: 1, user: 'Alice' }
  });
  

• 接收方式：

  import { useLocation } from 'react-router-dom';
  
  const { state } = useLocation();
  const id = state?.id;
  const user = state?.user;
  

• 优点：

  • 参数不会暴露在 URL 中，安全性更高。
  • 可以传递复杂对象。

• 缺点：

  • 刷新页面后 state 会丢失（除非手动持久化）。
  • 无法通过复制链接分享参数。

---

📌 总结对比

方式	传参方法	接收方法	显示在 URL	刷新保留	适合场景
查询参数	navigate('/path?k=v')	useLocation().search + URLSearchParams	✅ 是	✅ 是	分页、筛选、可分享链接
动态参数	navigate('/path/1')	useParams()	✅ 是（路径中）	✅ 是	详情页、分类页
状态传参	navigate('/path', { state })	useLocation().state	❌ 否	❌ 否（刷新丢失）	敏感数据、复杂对象、临时数据

---