antd+react-router-dom实现导航菜单切换

最新推荐文章于 2024-08-06 16:47:23 发布
最新推荐文章于 2024-08-06 16:47:23 发布
阅读量2w 收藏 10
点赞数 2
分类专栏： react antd web前端 文章标签： react react-router-dom antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kieran_/article/details/79888835
版权
web前端 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
react
2 篇文章 0 订阅
订阅专栏
antd
1 篇文章 0 订阅
订阅专栏

antd导航菜单用的是官网的Layout示例：点击打开链接

和react-router-dom结合，实现点击不同菜单切换到不同页面。

源码已经上传到git：点击打开链接

kieran_
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
antd+react Menu随url切换选中项
qq_32261717的博客
07-02 3020
问题： 1、当点击页面中的按钮切换到另一个页面时，menu选中项并没有跟着改变； 2、刷新页面时，url保持不变，content不变，但是menu会回到默认设置。 参考：antd中menu选中状态没有跟上路由[解决] 参考了大佬的方法，终于实现了！！！ 代码 与大佬的方法不同点在于： 1、路由与菜单不再一个组件中写，所以history通过属性的方式传递 // routes/index.js const IRouter = withRouter(({ history }) => { retu.
react+antd导航栏布局例子
qq_44345059的博客
07-18 7289
本文适用于用react+antd写一个如下导航栏布局 本例子实际效果如下 思路： 在antd网站上找一个你想要的布局样式，然后拆分代码，将头部、导航栏、右部分别封装成组件，便于后面页面的调用（大项目需要进一步拆分封装，本项目只做了大致的模块封装），然后尝试在每个板块页面上引用每个部分的组件，在组件外需要适当按需搭建一下框架，使组件更好的被融合在一起。 具体步骤 要完成搭建所用到的文件有： app.js（用来写点击导航栏跳转页面功能的实现） pages/各具体页面.js(x)+对应css/less（用
react 导航切换
weixin_30402085的博客
05-16 403
<ul class="nav"> <li onClick={() => this.changeFontColor(0)} className={`${0 === this.state.active ? 'active' : ''}`}>点击1</li> <li onClick={() => this.changeFontColor(1)...
react-router-dom使用指南（最新V6.22.2）
最新发布
muzidigbig的博客
08-06 841
查询参数不需要在路由中定义使用 useSearchParamshook 来访问和修改查询参数。其用法和 useState类似，会返回当前对象和更改它的方法使用 setSearchParams时，必须传入所有的查询参数，否则会覆盖已有参数// 当前路径为 /foo?// /foo?name=foo通过嵌套的书写Route组件实现对嵌套路由的定义。path开头为的为绝对路径，反之为相对路径 react-loadable NavLink高亮 useRoutes的返回是 React Element，或是 null
React 初探 [八] react-router 基本使用与侧边栏切换功能
Sandy_zhi的博客
08-17 1550
react-router 说明 1、react-router 相关理解 2、SPA的理解 3、路由的理解 4、前端路由的实现 react-router 的基本使用 =====督促自己完成======
千万级项目后台菜单导航设计及react antd实现
蜗牛365
11-28 2080
后台管理系统一般通过菜单进行各个功能点的导航，在面临大量菜单时需要考虑如何设计使客户体验更加便捷。作者在最近几个百万级、千万级项目的开发实施过程中，用户对菜单导航结构提出一些修改意见，经过若干次迭代以优化操作体验，作者将迭代过程总结下做个分享。 整体布局 第一阶段 传统树形菜单导航，根据项目的不同，有的采用横向排列，有的固定在左侧 顶部菜单：从上到下分别为：标题栏、菜单栏、工作区 侧边菜单：导航菜单占据整个左侧，右边从上而下为标题栏、工作区 侧边菜单有个变形，标题栏占据全部，下边左右分别为导航菜单、工作
react ant-design实现导航菜单menu的路由设置/切换页面
热门推荐
weixin_45667289的博客
12-28 1万+
react+ant-design实现导航菜单menu的路由设置或切换页面
antd 页面跳转_在React中使用react-router-dom路由
weixin_39847099的博客
12-23 1040
在React中使用react-router-dom路由使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。安装首先进入项目目录，使用npm安装react-router-dom：npm install rea...
react-antd-demo:学习react+react-router +antd 搭环境
04-30
#下载项目 git clone :modanzuo/react-antd-demo.git ...react-router-dom fetch #运行 安装库 npm install #本地开发 yarn yarn run start npm npm run start 上线 yarn yarn run build npm npm run build
webmusic:React+react-router-dom+react-redux+antd高仿网易云web端
05-05
本项目使用react+react-router-dom + react-redux + antd模仿网易云音乐web端 antd 使用了 Icon图标 Message提示 以及分页组件， 大量动画均为自己所写。 首页轮播滚动等也都是自己完成。 音频播放兄弟组件传参使用...
react_antd:react，react-router-dom @ 4.0，react-redux，antd
05-06
react@16.11.0、redux@4.0.4、react-router-dom@5.1.2, 这是一个react + antd的后台管理系统模版框架,具有响应式动态路由（可根据后台服务器提供列表或者登录验证身份进行修改Menu菜单）。 具备列表表单的增删改查、...
全栈项目招聘网站（react+react-router-dom+redux+react-redux+redux）源码
01-27
1) react-router-dom 开发单页应用 2) axios 与后端进行数据交互 3) redux+react-redux+redux-thunk 管理应用组件状态4) 学会使用 antd-mobile 组件库构建界面 5) mongoose 操作 mongodb 数据库 6) express 搭建...
管理系统系列--react + react-router + redux + AntD + Echarts + es.zip
02-25
通过定义路由配置，React-Router能够根据URL自动渲染对应的组件，实现单页应用（SPA）的页面切换。 3. **Redux**：Redux是JavaScript的状态容器，提供可预测化的状态管理。在React应用中，当组件间的通信和状态管理...
react管理系统使用antd时路由与左侧导航相关联
weixin_42560424的博客
10-14 2558
在使用antd的框架时，左侧导航栏与路由绑定切换，menu的selectedKeys与menu.item的key应该都是路由形式的。 render() { // 得到当前请求的路由路径 let path = this.props.location.pathname; console.log(path,'path') return ( // <HashRouter> <L
react+antD实现菜单数据递归渲染成导航组件
树上骑个猴的博客
06-26 955
react+antD实现菜单数据递归渲染成导航组件
《React后台管理系统实战 ：二》antd左导航：cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱
*
02-06 995
二
AntDesign(React)学习-8 Menu使用 切换框架页内容页面
zhaogaojian的专栏
02-01 117
本节实现一个点击左侧menu在右侧content切换页面效果，原始代码请从UMI学习-6开始看 1、在pages下添加两个组件，User,UserRole import React from 'react'; class User extends React.Component { render() { return ( <div>用户管理</div...
ant design 中 通过 menu 菜单控制不同内容页面展示
HZM_CSDN的博客
04-26 1588
技术栈： ant design vue ；--- menu 菜单组件 需求：通过点击侧边栏的不容标题，来实现内容页面的切换展示 代码演示： 为什么是showcontent[0] 的写法，因为@select事件打印的key值在数组里面，所以要选中它，就得找他的下标[0] ...
react + antd实现只展开一个父级菜单栏的侧边栏（三级菜单栏）
qq_44688392的博客
09-15 3871
工作中遇到一个需求，三级侧边栏只能展开一个父级菜单栏，保持页面简洁，提高用户体验，也是在网上查了很久，也没有完全符合要求的，就结合他人的自己写了一个。。。。 展开三级父级菜单的方法 onOpenChange = (openKeys) => { const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1); let openList; if(th
antd-mobild+react-router-dom实现 tabs
07-13
你可以使用antd-mobile和react-router-dom来实现tabs功能。首先，你需要安装antd-mobile和react-router-dom依赖包。 ```shell npm install antd-mobile react-router-dom ``` 接下来，你可以创建一个Tabs组件，并在其中使用antd-mobile的TabBar组件来实现tabs布局。然后，使用react-router-dom的Route组件来定义每个tab对应的页面。 ```jsx import React from 'react'; import { TabBar } from 'antd-mobile'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; const Tabs = () => { const tabItems = [ { title: 'Tab 1', path: '/tab1', component: Tab1 }, { title: 'Tab 2', path: '/tab2', component: Tab2 }, { title: 'Tab 3', path: '/tab3', component: Tab3 }, ]; const renderTabs = () => { return tabItems.map((item) => ( <TabBar.Item key={item.path} title={item.title} icon={<div />} selectedIcon={<div />} selected={window.location.pathname === item.path} onPress={() => { window.location.href = item.path; }} /> )); }; return ( <Router> <div style={{ position: 'fixed', width: '100%', bottom: 0 }}> <TabBar>{renderTabs()}</TabBar> </div> {/* Define routes */} {tabItems.map((item) => ( <Route key={item.path} path={item.path} component={item.component} /> ))} </Router> ); }; const Tab1 = () => <div>Tab 1 content</div>; const Tab2 = () => <div>Tab 2 content</div>; const Tab3 = () => <div>Tab 3 content</div>; export default Tabs; ``` 在上面的代码中，我们定义了三个tab，分别对应不同的路径和组件。通过点击tab，我们可以切换显示不同的内容。你可以根据自己的需求修改tab的数量、标题、路径和对应的组件。 希望这可以帮助你实现antd-mobile和react-router-dom的tabs功能！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值