ant-mobile TabBar 组件添加路由

感觉 ant-mobile 和 vant 相比要很不方便，很多功能需要我们自己去实现，团队的重心应该都在 ant-design 上，比如 TabBar 并没有设置路由功能，本文阐述了如何在一个使用了 react-router 的 react 项目中合理的使用 antd-mobile tabbar 功能。

为了使组件结构更加清晰，首先要在 TabBar 组件外包一层父组件来读取路由信息，我们可以通过 this.props.location.pathname 拿到当前的 pathname，我项目中的 pathname 的结构为 /index/mine，取到 mine 即为当前页面：

let currPage = this.props.location.pathname.split('/')[2];

 

将 currPage 传递给子组件：

<Tabbar {...this.props} currPage={currPage} />

在 Tabbar 组件中使用 shouldComponentUpdate 生命周期钩子来判断是否需要更改 selectedTab，如果 props.currPage 与 state.selectedTab 一致即更改当前 tab，如果一致则忽略。

shouldComponentUpdate(props, state) {
    // 根据外部传来的参数来确定打开的页面
    if (props.currPage !== state.selectedTab) {
        this.setState({
            selectedTab: props.currPage
        })
    }
    return true;
}