React Router 传参三板斧:新手也能 5 秒做决定

前言

在单页应用里,路由跳转就像快递员把包裹送到另一个房间。包裹怎么装?地址怎么写?收件人怎么拆?每一步都决定包裹能否安全、准时、完整地送达。React Router 提供了三种最常用的"快递方式"------查询参数、路径参数和 state 隐式参数------它们各有优缺点、适用场景。

很多初学者容易混淆这三种方式:

  • 把本该公开分享的筛选条件写进了 state,结果刷新页面就"丢件";
  • 把只能临时使用的滚动位置写进了查询字符串,导致 URL 又丑又长;
  • 把对象直接塞进路径参数,结果浏览器直接 404。

本文带你快速掌握三种传参方式的核心差异。

一、 查询参数

① 路由声明

无需占位符,直接写静态路径。

js 复制代码
{ path: '/noteList', element: <NoteList /> }

② 路由跳转

声明式

js 复制代码
import { Link } from 'react-router-dom';

<Link to={{ pathname: '/noteList', search: '?category=1&page=2' }}>
  查看分类 1 第 2 页
</Link>

命令式

js 复制代码
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate({ pathname: '/noteList', search: '?category=1&page=2' });

search 必须是 '?key=value' 的完整字符串,也可以自己拼。

③ 路由接收:useSearchParams()

js 复制代码
import { useSearchParams } from 'react-router-dom';

function NoteList() {
  const [searchParams] = useSearchParams();
  const category = searchParams.get('category'); // "1"
  const page     = Number(searchParams.get('page')) || 1;
  return <>分类:{category} 第 {page} 页</>;
}

URL 上有 ?key=value,参数留在地址栏,刷新不丢适合筛选、分页、排序

二、路径参数

① 路由声明

path 中用冒号 : 占位

js 复制代码
{ path: '/noteList/:category', element: <NoteList /> }

② 路由跳转

js 复制代码
<Link to="/noteList/123">分类 123</Link>
// 或
navigate('/noteList/123');

③ 路由接收: useParams()

js 复制代码
import { useParams } from 'react-router-dom';

function NoteList() {
  const { category } = useParams(); // "123"
  return <>当前分类 ID:{category}</>;
}

刷新页面,数据不丢失。

三、state 隐式参数

① 路由声明

任何路由都能接。

js 复制代码
{ path: '/noteList', element: <NoteList /> }

{ path: '/noteList/:category', element: <NoteList /> }

② 路由跳转

js 复制代码
// 命令式
navigate('/noteList', { state: { category: 1, from: 'banner' } });

// 声明式
<Link to="/noteList" state={{ category: 1 }} />

③ 路由接收: useLocation()

js 复制代码
import { useLocation } from 'react-router-dom';

function NoteList() {
  const { state } = useLocation();      // { category: 1, from: 'banner' }
  return <>来自:{state?.from}</>;
}

参数不会出现在 URL,刷新即消失适合临时或一次性过渡数据(例如记住滚动位置)。

四、路由传参表

维度 查询参数(Query String) 路径参数(Path Params) 隐式参数(Location State)
URL 示例 /noteList?category=1&page=2 /noteList/1 /noteList(无痕迹)
路由声明 { path: '/noteList', element: <NoteList /> } { path: '/noteList/:category', element: <NoteList /> } { path: '/noteList', element: <NoteList /> }
跳转方式 navigate('/noteList?category=1') navigate('/noteList/1') navigate('/noteList', { state: { category: 1 } })
接收 Hook useSearchParams()useLocation() + 手动解析 useParams() useLocation().state
数据类型限制 仅字符串 仅字符串 任意类型(对象、数组等)
刷新后保留
能否分享/收藏
URL 可读性 中(可能较长) 高(简洁明了) 最高(无参数痕迹)
典型场景 列表筛选、分页、搜索关键词 详情页 ID、RESTful 资源定位 临时过渡数据(如返回滚动位置、表单结果)
相关推荐
小爱同学_25 分钟前
一次面试让我重新认识了 Cursor
前端·面试·程序员
golang学习记33 分钟前
AI 乱写代码?不是模型不行,而是你的 VS Code 缺了 Context!MCP 才是破局关键
前端
星光不问赶路人39 分钟前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
z_y_j2299704381 小时前
服务器中使用Docker部署前端项目
服务器·前端·docker·容器
迪丽热爱1 小时前
解决【npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。】问题
前端·npm·node.js
数字冰雹2 小时前
图观 流渲染场景服务器
服务器·前端·数据库·数据可视化
李明卫杭州2 小时前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-2 小时前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
zz-zjx2 小时前
Web接入层的“铁三角”---防盗链、反向代理,负载均衡(nginx)
前端·nginx·负载均衡
C+ 安口木2 小时前
CSS通用优惠券样式
前端·css