react antd路由跳转

带“？”形式的跳转

类似于“http://xxx:8000/list?id=1”

<Link to='/list?id=1'>跳转链接</Link>

在被跳转的页面中获取到参数“1”

componentDidMount(){
  this.handleList();
}
handleList = () =>{
    const {dispatch,location} = this.props;
    const {pages} = this.state;
    // location.search得到的结果是"?id=1"，
    let type = location.search.charAt('4');//1

        const params = {
            id: type?type:null,
            pageNum: pages.page, 
            pageSize: pages.size,
            startRow: 1,
        };
        dispatch({
          type: 'api/getList',
          payload: params,
        });
        type=null;
}

带“/”形式的跳转

1.在router.config.js文件中配置子路由，指向文件和父路由中的完全一致。

 {
            path: '/list/:id',
            name: 'APIlist',
            hideInMenu: true,
            component: './List/CardList',
  },

2.跳转

<Link className={styles.link} to={{pathname:'/list/1'}}>跳转</Link>

3.被跳转的页面中获取到id

const id = this.props.match.params.id;

然后拼接好params发起dispatch

用router跳转

router.push({ pathname: '/list/' + id })；

跳转的形式很多种，按自己的需求来解决问题。但是各有差异，用/形式的对浏览器的history比较友好，方便跳转。

参考：

react-router API

简书

JS window location