umi4学习路由跳转 history useNavigate 的使用

最新推荐文章于 2025-06-02 09:07:17 发布

柳絮泡泡

最新推荐文章于 2025-06-02 09:07:17 发布

阅读量3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： react+js umi 文章标签：学习 javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43665443/article/details/132478045

react+js 同时被 2 个专栏收录

13 篇文章

订阅专栏

umi

1 篇文章

订阅专栏

本文介绍了在使用Umi框架时，如何通过`history.push`和`useNavigate`处理不同场景下的参数传递，包括无参数跳转、携带大量参数和通过地址栏显示少量参数的方法，以及在详情页面获取这些参数的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

umi4+history 已经不用query传参了，接下来就来讲讲如何传参吧
在这里插入图片描述

- 第一种,适用于只跳转路径，不携带参数

 import {  history } from "umi";
 history.push('/user');

- 第二种，用于携带参数，并且参数很多的情况
在这里插入图片描述

 // 列表界面
 import { useNavigate } from "umi";
 export default ()=>{
   const navigator = useNavigate();

  const handleClick=()=>{
      navigator("/user/detail", {
           state: {
           // 需要传到详情的参数
           },
    });
}

return   <Button onClick={handleClick} >进入详情</Button>
}

// 详情界面，如何获取参数
import { useLocation } from "umi";

export default () => {
// state是我们传过来的参数，这种传参和取值的形式，是不会再浏览器地址上显示字段的，比较友好，也不容易暴露信息
  const { pathname, state } = useLocation();
  
  console.log(state);
}

- 第三种参数较少，想通过地址栏传值的

// 列表界面
import { history } from "umi";

history.push({
      pathname:’/user/detail‘,
      search: `?id=123`,
    });


// 详情界面取值
import { useLocation } from "umi";

export default ()=>{
  const { search } = useLocation();
  let searchParams = new URLSearchParams(search);
  
  console.log(searchParams.get("id"))
  
}