获取参数 和 路由状态

获取参数

通过路由参数获取

警告

格式如下: xxx/:id

获取参数通过 useParams

• 新建一个路由

{
  path: "/page2/:id",
  element: <Page2></Page2>
},

• 在组件中获取参数

import { useParams } from "react-router-dom";
function Page2() {
  const Params = useParams();
  console.log("*****");
  console.log(Params.id);
  console.log("*******");
}

第二种通过参数来获取

警告

格式如下: xxx?id=xxx

获取参数通过 URL

• 获取参数

// 这样就能获取到了
const location = useLocation();
console.log(location);
const searchParams = new URLSearchParams(location.search);
const paramsObject = Object.fromEntries(searchParams.entries());
console.log(paramsObject);

第三种 通过参数来获取

警告

格式如下: xxx?id=xxx

获取参数通过 URL

import { useSearchParams } from "react-router-dom";
const [searchParams] = useSearchParams();
console.log(searchParams);
const id = searchParams.get("id");

路由跳转传递参数

在 React Router v6 中，可以使用 useNavigate 钩子实现编程式页面跳转，并在跳转时传递参数。主要有两种方式：state 状态参数（隐式） 和 URL 搜索参数（显式）。

引入并实例化 useNavigate

// 从 react-router-dom 中引入 useNavigate 钩子
import { useNavigate } from "react-router-dom";

function HomePage() {
  // 实例化 navigate 函数，用于编程式跳转
  const navigate = useNavigate();

  return <div>首页</div>;
}

方式一：state 状态参数传递（隐式传参）

参数不会显示在 URL 中，通过 useLocation 钩子获取。适合传递不希望暴露在地址栏的数据。

跳转发起页面：

import { useNavigate } from "react-router-dom";

export default function HomePage() {
  // 实例化 navigate 跳转函数
  const navigate = useNavigate();

  // 点击按钮时触发跳转，通过 state 隐式携带 id 和 name 参数
  const handleClick = () => {
    navigate("/detail", {
      state: {
        id: 1001, // id：推荐 number 或 string 类型
        name: "张三", // name：string 类型
      },
    });
  };

  return (
    <div>
      <h2>首页</h2>
      {/* 点击按钮跳转到详情页并携带 state 参数 */}
      <button onClick={handleClick}>跳转到详情页</button>
    </div>
  );
}

目标页面接收参数：

// 引入 useLocation 钩子，用于读取路由 state
import { useLocation } from "react-router-dom";

export default function DetailPage() {
  // 获取路由 location 对象，其中包含跳转时传递的 state
  const location = useLocation();

  // 从 state 中解构出 id 和 name；使用 || {} 兜底，防止直接访问页面时 state 为 null 报错
  const { id, name } = location.state || {};

  return (
    <div>
      <h2>详情页</h2>
      <p>接收到的 id：{id}</p>
      <p>接收到的 name：{name}</p>
    </div>
  );
}

方式二：URL 搜索参数传递（显式传参）

参数拼接在 URL 中（如 /detail?id=1001&name=张三），通过 useSearchParams 钩子解析。适合需要分享、收藏链接的场景。

跳转发起页面：

import { useNavigate } from "react-router-dom";

export default function HomePage() {
  // 实例化 navigate 跳转函数
  const navigate = useNavigate();

  // 点击按钮时触发跳转，将 id 和 name 拼接为 URL 查询参数
  const handleClick = () => {
    // 定义要传递的参数；id 推荐 number 或 string 类型，name 为 string 类型
    const id = 1001;
    const name = "张三";
    // 拼接为查询字符串，中文字符会被自动编码
    navigate(`/detail?id=${id}&name=${name}`);
  };

  return (
    <div>
      <h2>首页</h2>
      {/* 点击按钮跳转到详情页并携带 URL 查询参数 */}
      <button onClick={handleClick}>跳转到详情页</button>
    </div>
  );
}

目标页面接收参数：

// 引入 useSearchParams 钩子，用于解析 URL 查询参数
import { useSearchParams } from "react-router-dom";

export default function DetailPage() {
  // 获取搜索参数对象 searchParams（setSearchParams 未用到可不解构）
  const [searchParams] = useSearchParams();

  // 通过 get 方法读取指定参数；注意：读取到的值均为 string 类型
  const id = searchParams.get("id"); // 得到字符串 "1001"，如需数值需手动 Number(id)
  const name = searchParams.get("name"); // 得到字符串 "张三"

  return (
    <div>
      <h2>详情页</h2>
      <p>接收到的 id：{id}</p>
      <p>接收到的 name：{name}</p>
    </div>
  );
}

参数安全注意事项

• 敏感参数（如密码、token、手机号等）不要通过 URL 搜索参数传递，因为参数会明文显示在地址栏、浏览器历史记录和服务器日志中，存在泄露风险，此类数据应使用 state 或其他安全方式传递。
• useSearchParams 读取到的参数均为字符串类型，即使传入的是数字也需自行转换类型。

参数类型约定

• id：推荐使用 number 或 string 类型
• name：推荐使用 string 类型
• 通过 state 传递时参数保持原始类型；通过 URL 搜索参数传递时会被序列化为字符串

路由状态

• 一般写在根组件中,作为判断 loading 是否完成的依据

警告

• 通过 useNavigation 来获取路由状态

• 判断是 状态是 loading 还是其他的,状态是 loading 就加载 loading 的类

export default function Root() {
  // 路由信息对象
  const navigation = useNavigation(); // 路由信息对象
  return (
    <div id="detail" className={navigation.sate == "loading" ? "loading" : ""}>
      <Outlet />
    </div>
  );
}