近期使用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方式
