使用Umi的history向子页面传递数据

最新推荐文章于 2025-07-07 08:54:19 发布

原创最新推荐文章于 2025-07-07 08:54:19 发布 · 9.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

前端学习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Umi.js应用中利用history对象进行页面跳转和传递参数。通过在父页面设置history.push()方法，结合路由配置，将数据以state形式传递到子页面。子页面则通过history.location获取并显示这些数据。此外，还展示了如何使用history.goBack()返回上一页。文章以具体代码示例解析了这一过程，并提供了历史记录的查看方式。

在Umi官方文档中，给出了两种跳转页面的方式，这篇文章主要讲解使用history的方法进行跳转和传参的操作。
先给出代码
路由部分(.umirc.ts)：

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },   //父页面路由
    { path: '/users', component: '@/pages/users/index' },  //子页面路由
  ],
  fastRefresh: {},
});

父页面(src/pages/index.tsx)：

import React, { useState } from 'react';
import { history } from 'umi';
export default function IndexPage() {
  const [count,setCount]=useState(0)
  const handleKip = () => { //跳转页面时进行的操作
    history.push({          //umi文档规定的固定格式
      pathname: '/users',   //要跳转的路由
      state: {              //传递的数据
        data:count
      },
    });
  };
  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <div>{count}</div>
      <button onClick={()=>setCount(count+1)}>count+1</button>
      <button onClick={handleKip}>跳转页面</button>
    </div>
  );
}

子页面(src/pages/users/index.tsx)：

import React, { useState } from 'react';
import { history } from 'umi';
const UsersIndex = () => {
  const handleBack = () => { //返回上一页面的操作
    history.goBack();
  };
  //通过history传递的参数，子页面接收时使用history的内置location去接收
  //此时打印出history.location可以看到父页面传来的参数
  console.log(history.location)
  //将我们需要的值赋给num，然后将其在页面上显示出来
  const num = history.location.state.data;  
  return (
    <div>
      <div>{num}</div>
      <button onClick={handleBack}>返回</button>
    </div>
  );
};
export default UsersIndex;

打印出的history.location部分如下图所示，其中state部分为所需要的数据
在这里插入图片描述
总结：Umi的history方法跳转页面、传递数据，主要是通过history内置的一些方法进行的，本文主要用到了history.push()和history.location两种内置方法。其中history.push()进行路由的更改和数据的传递，history.location进行数据的接收。
如果有什么问题欢迎大家在评论区交流，我会尽可能进行解答。