ant design Pro 跳转路由--带参数的跳转

2019-07-27 本文已影响0人 miner敏儿

近期使用ant design Pro 项目中遇到跳转路由的问题,
一开始是遇到创建跳转到创建页面的问题
这一篇文章干货满满哦
首先我的跳转的路径是在modal中写的
上代码

routerRedux跳转路由 /router

import router from ‘umi/router’;
import { routerRedux } from ‘dva/router’;

不带参数的路由跳转

首先使用import { routerRedux } from 'dva/router';
modal中

在这里插入图片描述

然后在js中点击创建按钮进行跳转

在这里插入图片描述

带参数id的路由跳转

同样跳转路径还是写在modal中
在这里插入图片描述
首先在路由配置的地方也要改

在这里插入图片描述
在js中同样的方式dispatch调用

在这里插入图片描述
在create的页面中

    componentDidMount () {
        console.log(this.props.match.params.id)
    }

拿到跳转后的id的值

带参数data的路由跳转

modal中同样

在这里插入图片描述

使用json.stringify先把对象解析
router.config.js中

在这里插入图片描述

在创建点击的事件中同样

在这里插入图片描述

在create的页面中

    componentDidMount () {
        console.log(this.props.match.params.data)
    }

在这里插入图片描述

需要在转化成对象

    componentDidMount () {
        console.log(JSON.parse(this.props.match.params.data))
    }

在这里插入图片描述

`以下的方法中router中都不需要配置`

params传参跳转(不推荐, 刷新后获取不到参数值)

在这里插入图片描述

  // 创建
  onCreate = () => {

    this.props.dispatch(routerRedux.push({
      pathname: '/api-manage/create-sub-system',
      params: {
        id: 6,
        value: 'lala',
      }
    }))
  };

创建的页面通过
this.props.location获取到值

在这里插入图片描述

但是在当前页面进行刷新以后就获取不到params的值了

在这里插入图片描述

但是通过上述两个的对比可以看出query一直存在, 所以我们可以通过query来进行路由传参

`query路由传参(推荐)`

在这里插入图片描述

 // 创建
  onCreate = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/api-manage/create-sub-system',
      query: {
        id: 6,
        value: 'lala',
      }
    }))
  };

创建页面通过this.props.location

在这里插入图片描述

Link 进行路由跳转(极力推荐)

import Link from 'umi/link';

在这里插入图片描述

import Link from 'umi/link';
<Link to={{
     pathname: '/api-manage/create-sub-system',
      query: {
        id: 6,
        value: 'lala',
      }
    }}>
      <Button
        style={{ marginLeft: 8 }}
        type="primary"
      // onClick={this.onCreate}
      >
        <Icon type="plus" />
        创建
    </Button>
 </Link>

create页面 this.props.location拿到值