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

近期使用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拿到值

同query一样的还有一个state方式, 只是属性不一样, state传的参数是加密的, query 传的参数是公开的,

以上通过过r Link parmas state 或者routerRedux.push方式的路由跳转传参都可以使用js中的 this.props.history.push方式