ant design pro 跨页面传参

最新推荐文章于 2023-06-27 16:53:54 发布

转载最新推荐文章于 2023-06-27 16:53:54 发布 · 4.2k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_25252769/article/details/79958487

ant-design 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在React应用中使用不同方法进行页面跳转及参数传递的具体实现，包括使用routerRedux、Link和router.push三种方式，对比了它们在刷新页面时参数保留情况的差异，并提供了具体的代码示例。

1、routerRedux方式（刷新页面，参数丢失）

import { routerRedux } from 'dva/router';
//页面跳转+参数
goOrder (record){
    this.props.dispatch(routerRedux.push({ 
      pathname: '/giveData/queryOrder',
      params: record.userId
    }))
  }

<a className={styles.oprLink} onClick={()=>this.goOrder(record)}>查订单</a>

参数接收：使用this.props.location.params接收值。

2、link方式

import { Link } from 'react-router-dom';
// 或者 import { Link } from 'dva/router';

<Link to={{pathname:'/user',query:id}}>添加用户</Link>

参数接收：使用v2，v3的 this.props.location.query或者v4的this.props.location.search接收值。

3、router.push方式（刷新页面，参数不丢失）

import router from 'umi/router'
 
// 法一
// 先定义好路由
router.push(`/test/search/${param1}/${param2}`);

// 获取方式
const { match: { params } } = this.props;
cosnt param1 = params.param1;
cosnt param2 = params.param2;


// 法二
router.push({
    pathname: '/test/search/',
    query: {
        param1: param1,
        param2: param2,
    },
});

// 获取方式
const { location: { query } } = this.props;
cosnt param1 = query.param1;
cosnt param2 = query.param2;

原文：https://blog.youkuaiyun.com/qq_25252769/article/details/79958487

其他参考方法： ant design列表页带参数跳转到详情页

https://www.jianshu.com/p/963a2a824832

https://www.cnblogs.com/yky-iris/p/9161907.html

https://www.jianshu.com/p/54e0c6317905

https://www.jianshu.com/p/1233d7f8d03c