感觉 ant-mobile 和 vant 相比要很不方便，很多功能需要我们自己去实现，团队的重心应该都在 ant-design 上，比如 TabBar 并没有设置路由功能，本文阐述了如何在一个使用了 react-router 的 react 项目中合理的使用 antd-mobile tabbar 功能。
为了使组件结构更加清晰，首先要在 TabBar 组件外包一层父组件来读取路由信息，因为 TabBar 的内容在版本迭代中很少去改动，我们可以直接使用 switch 来设置当前页：
switch (this.props.location.pathname) {default:case "/index/home":currPage = "home";break;case "/index/shop":currPage = "shop";break;case "/index/report":currPage = "report";break;case "/index/mine":currPage = "mine";break;
}
将 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;
}