学习React-24-路由传参

LFly_ice2025-11-26 5:04

动态路由

复制代码

适用于：参数是URL 的一部分，如 /user/123

定义参数

ts 复制代码

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

获取参数

ts 复制代码

import { useParams } from 'react-router';

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

查询字符串（query string）

复制代码

适用于：可选参数，如 /search?keyword=react

定义参数

ts 复制代码

<NavLink to="/about?hobby=篮球&job=歌手&repre=你干嘛~">About</NavLink>
// 或者编程式跳转
navigate('/search?keyword=react');

获取参数

ts 复制代码

export default function About() {
	// useSearchParams 获取参数对象，提供修改参数的方法
  const [searchParams, setSearchParams] = useSearchParams();
  const job = searchParams.get("job");
  const hobby = searchParams.get("hobby");
  const repre = searchParams.get("repre");
  return (
    <div>
      <h1>About</h1>
      <NavLink to="/home">Home</NavLink>
      <p>工作：{job}</p>
      <p>爱好：{hobby}</p>
      <p>代表：{repre}</p>
      <button onClick={() => setSearchParams(prev => {
        prev.set("repre", "你干嘛~ 哎呦~ 你干嘛~~");
        return prev;
      })}>开始吟唱</button>
    </div>
  );
}

状态传递（state）

复制代码

适用于：不暴露在 URL 中的参数，比如跳转时带对象或敏感数据。

定义参数

ts 复制代码

<NavLink to="/home" state={{name: '黑子', age: 18}}>Home</NavLink>
//或者编程式
 navigate('/profile', { state: {name: '黑子', age: 18} });

获取参数

ts 复制代码

export default function Home() {
  const location = useLocation();
  return (
    <div>
      <h1>Home</h1>
      <NavLink to="/about?hobby=篮球&job=歌手&repre=你干嘛~">About</NavLink>
      <div>
        <p>姓名：{location.state.name}</p>
        <p>年龄：{location.state.age}</p>
      </div>
    </div>
  );
}

注意：state 数据在页面刷新后会丢失，不适合持久化参数。

对比

方式	是否暴露在 URL	是否可刷新保留	适用场景
`useParams`	✅	✅	RESTful 路由参数
`useSearchParams`	✅	✅	筛选、分页、搜索关键词
`state`	❌	❌	临时数据、不暴露给用户的数据