react+antd-mobile之TabBar路由

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

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

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

tabbar

目前的这个是没有加路由的,我想要的是,点击我的,地址栏的URL可以改成http://localhost:3000/my,在网上看了很多,也做出了效果
react-router-dom的版本为5.1.2,做了简单的封装,可以看我之前的一篇写的react路由封装

item

这个图片是tabbar的一个item,也就是首页,点击的时候呢,改变地址栏,对应的图标也改变,可以看到 selected 和 onPress,这个的具体作用,不细说了
pathname是从this.props.location.patnname里面获得的

路由页

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

跳转二级页面的时候,需要把底部菜单隐藏,这个是配合redux做了一个全局变量
还有一点,因为tabbar是定位在底部的,文档上面展示的页面高度为100%,如果要配合路由的话,需要把高度和定位修改一下,在加个z-index

css


文笔不好,将就看吧
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值