react+antd-mobile之TabBar路由

想了解create-react-app配置antd-mobile按需加载,以及配置less和vw的可以看上一篇博客

这一篇特别记录antd-mobile的TabBar配合路由的使用

按照antd-mobile给出的文档,可以构建出此UI页面(相信都能做到)

react+antd-mobile之TabBar路由_第1张图片

目前的这个是没有加路由的,我想要的是,点击我的,地址栏的URL可以改成http://localhost:3000/my,在网上看了很多,也做出了效果

react-router-dom的版本为5.1.2,做了简单的封装,可以看我之前的一篇写的react路由封装


react+antd-mobile之TabBar路由_第2张图片

这个图片是tabbar的一个item,也就是首页,点击的时候呢,改变地址栏,对应的图标也改变,可以看到 selected 和 onPress,这个的具体作用,不细说了

pathname是从this.props.location.patnname里面获得的


react+antd-mobile之TabBar路由_第3张图片

因为目前来说用的是最新的react-router-dom版本,网上有些是之前版本的,有些东西有一点改变,这个组件挺重要


跳转二级页面的时候,需要把底部菜单隐藏,这个是配合redux做了一个全局变量

还有一点,因为tabbar是定位在底部的,文档上面展示的页面高度为100%,如果要配合路由的话,需要把高度和定位修改一下,在加个z-index

css


文笔不好,将就看吧

你可能感兴趣的:(react学习之旅)