React Ant Design Menu导航菜单跳转

昨天小编在学习React使用Ant Design Menu导航菜单时，发现Ant Design4.2版本之后的 Menu 导航菜单更新了写法。新写法不再需要自行拼接 JSX，直接采用数组写法直接用 items={数组名}就可以了。

原写法

 <Menu mode="horizontal" defaultSelectedKeys={['mail']}><Menu.Item key="mail" icon={<MailOutlined />}>Navigation One</Menu.Item><Menu.SubMenu key="SubMenu" title="Navigation Two - Submenu" icon={<SettingOutlined />}><Menu.Item key="two" icon={<AppstoreOutlined />}>Navigation Two</Menu.Item><Menu.Item key="three" icon={<AppstoreOutlined />}>Navigation Three</Menu.Item><Menu.ItemGroup title="Item Group"><Menu.Item key="four" icon={<AppstoreOutlined />}>Navigation Four</Menu.Item><Menu.Item key="five" icon={<AppstoreOutlined />}>Navigation Five</Menu.Item></Menu.ItemGroup></Menu.SubMenu></Menu>

现写法

 const items=[{ label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key{ label: '菜单项二', key: 'item-2' },{ label: '菜单项三', key: 'item-3' },{ label: '菜单项四', key: 'item-4' }
]
const App = () => {return (<MenudefaultSelectedKeys={['1']}mode="inline"items={items}/>);
};

虽然这种写法大大减少了我们的工作量，但随之而来的又有了新的问题。该怎么跳转？？？之前写JSX的时候可以直接在里面用<link ></link>来跳转，但现在添加不了link。小编因为刚接触React，所以就卡壳了，搜了半天终于知道如何解决这个问题。因此写篇文章来记录一下自己学习React所遇到的问题。

解决方法

在更新后 Menu导航菜单可以绑定点击事件，可以返回 key, keyPath等值

例如

const items = [{key: '/Article',icon: <HomeOutlined />,label: "数据概览"},{key: '/',icon: <DiffOutlined />,label: "内容管理"},{key: '/Publish',icon: <EditOutlined />,label: "发布文章"}]<Menu theme="dark" onClick={onClick} defaultSelectedKeys={[pathname]}
selectedKeys={[pathname]} mode="inline"
style={{ height: '100%', borderRight: 0 }}
items={items} ></Menu>const onClick = (e) => {console.log(e)}

所以我们可以用<link>绑定地址跳转写法用到我们数组里来，把数组里的key写成成我们要跳转的页面。再通过点击能拿到我们的跳转页面了。

拿到地址以后，用react-route-dom里的useNavigate来进行跳转就行

切记，一定要再方法里创建！！！小编之前糊涂看到Ant Design组件在外面创建也就跟着在外面创建，结果疯狂报错。都是血的教训。

以上就是解决Ant Design4.2之后 Menu导航菜单跳转过程了，供大家学习。小编刚学习React，有不对的地方下嘴轻点，小编嘴笨怕争不过。

React Ant Design Menu导航菜单跳转相关推荐

ant vue 树形菜单横向显示_ant design vue menu 导航菜单
ant design vue menu 导航菜单 ant design vue menu 导航菜单是一个网站或者系统的重要功能,通过导航可以对网站或者系统的功能进行分门别类. 水平导航菜单例子首页 ...
ant design Menu组件子菜单样式设置
ant design Menu组件子菜单样式设置 Menu二级子菜单宽度较宽,直接设置width不起作用,会被他自带的min-width覆盖解决办法:设置组件的全局样式,提升优先级,如下所示: &l ...
vue、Menu 导航菜单、Menu属性事件、vue Menu 全部导航菜单、vue Menu 全部属性事件
vue.Menu 导航菜单.Menu属性事件.vue Menu 全部导航菜单.vue Menu 全部属性事件设计规则何时使用代码演示顶部导航内嵌菜单缩起内嵌菜单只展开当前父级菜单垂直菜 ...
BootstrapBlazor实战 Menu 导航菜单使用(2)
接上篇: B08. BootstrapBlazor实战 Menu 导航菜单使用(1) 实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后 ...
React Ant design pro 访问服务器接口，获取数据显示
React Ant design pro 访问服务器接口一.前两天更新了Ant design pro环境搭建,需要了解的小伙伴可以看一下之前的内容,还有react基础教程噢. 二.框架搭建完后,一般 ...
react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
使用create-react-app搭建TypeScript+React+Ant Design开发环境
一.使用create-react-app创建一个支持TypeScript+React的开发环境: 要创建一个支持TypeScript的Create React App项目,可以运行: npx crea ...
从Antd 源码到自我实现之 Menu 导航菜单
Antd Menu 简述 Menu 为页面和功能提供导航的菜单列表. 导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转.一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提 ...
React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...

React Ant Design Menu导航菜单跳转

拿到地址以后，用react-route-dom里的useNavigate来进行跳转就行

切记，一定要再方法里创建！！！小编之前糊涂看到Ant Design组件在外面创建也就跟着在外面创建，结果疯狂报错。都是血的教训。

React Ant Design Menu导航菜单跳转相关推荐

最新文章

热门文章