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