Author：Mr.柳上原

• 付出不亞于任何的努力
• 愿我們所有的努力，都不會(huì)被生活辜負(fù)
• 不忘初心，方得始終

ant框架里，Table表格組件里跳轉(zhuǎn)頁面及傳遞數(shù)據(jù)的方法
在Table表格組件中，經(jīng)常會(huì)遇到表格里有跳轉(zhuǎn)頁面的需求
跳轉(zhuǎn)方法大致與普通react頁面路由方法類似
依然是在columns方法里對(duì)需要跳轉(zhuǎn)的td位置進(jìn)行render自定義設(shè)置
設(shè)置方法如下：

// 使用onClick進(jìn)行按鍵觸發(fā)跳轉(zhuǎn)，并且可以傳參給子頁面
// 傳遞的參數(shù)在子頁面的props.location.state對(duì)象里面
columns = [
        {
            title: '操作',
            width: 120,
            dataIndex: 'operation',
            key: 'operation',
            align: 'center',
            fixed: 'right',
            // 跳轉(zhuǎn)詳情頁
            render: (text, record) => {
                return <a onClick={() => this.toShopDetails(record.id)}>商鋪情況</a>
            }
        },
]

// 跳轉(zhuǎn)詳情頁
    toShopDetails = (id) => {
        this.props.history.push(`${this.props.match.url}/shopDetail`, {id});
    }

注意點(diǎn)：
別忘記把子頁面引入

import ShopDetails from '../shop/shopDetails'; // 詳情頁

也別忘了在寫上路由

<LayerRouter>
     <Route path={`${this.props.match.url}/shopDetail`} render={props => <ShopDetails {...props} />} />
</LayerRouter>