前言
在使用React进行web开发时，跳转页面是经常遇到的一个问题。在React中，我们通常使用react-router管理页面路由，然而在大型项目开发中，页面路由会逐渐变得复杂起来。所以，如果我们能够结合菜单组件，就能够更方便快捷的进行页面跳转。这时，我们可以使用react-router-menu这个npm包来帮助我们解决这个问题。
什么是 react-router-menu
react-router-menu是一款基于react-router的菜单组件库。它简单易用，体积小巧，同时也提供了较为丰富的自定义配置。
安装
在使用react-router-menu前必须先安装react-router，然后才能够进行安装。
你可以通过npm在你的React项目中安装react-router-menu。
npm install react-router-menu --save
使用
Step 1：导入
在使用react-router-menu前，需要先导入模块。
import { Menu } from 'react-router-menu';Step 2：定义菜单
定义菜单项并传入所需属性。
-- -------------------- ---- -------
----- ---- - -
-
----- ------- -- ----
-------- ----- -- ----
----- -------- -- ----
----- --- -------- -- --------
--
-
----- --------
-------- -----
----- ---------
----- ---- --------
--
-
----- -------
-------- -------
----- ---- --------------
--------- - -- -------
-
----- ----------------
-------- -------
----- ---------------------
--
-
----- ---------------
-------- -------
----- --------------------
-
-
-
--Step 3：渲染菜单组件
在定义完菜单后，就可以使用Menu组件进行菜单渲染。
<Menu menu={menu} />以上三个步骤，react-router-menu就已经可以在你的项目中使用了。
自定义配置
在定义菜单时，react-router-menu还提供了一些可选的属性来自定义菜单项的配置。下面将逐一介绍这些属性。
1. name
name属性用来表示菜单名称，必须字段。
const menu = [
{
name: 'home'
// ...
}
];2. path
path属性表示对应路径，必须字段。
const menu = [
{
path: '/home'
// ...
}
];3. icon
icon属性用来表示菜单图标，可选字段。你可以使用FontAwesome或其他字体图标库中的图标。
const menu = [
{
icon: 'fa fa-home'
// ...
}
];4. tooltip
tooltip属性用来表示菜单提示信息，可选字段。
const menu = [
{
tooltip: '首页'
// ...
}
];5. children
children属性表示子菜单列表，可选字段。
-- -------------------- ---- -------
----- ---- - -
-
--------- -
-
----- ----------------
-------- -------
----- ---------------------
--
-
----- ---------------
-------- -------
----- --------------------
-
-
-- ---
-
--示例代码
下面是一个完整的示例代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------- ------ ---- - ---- -------------------
------ - ---- - ---- --------------------
----- --- - -- -- -
----- ---- - -
-
----- -------
-------- -----
----- --------
----- --- --------
--
-
----- --------
-------- -----
----- ---------
----- ---- --------
--
-
----- -------
-------- -------
----- ---- --------------
--------- -
-
----- ----------------
-------- -------
----- ---------------------
--
-
----- ---------------
-------- -------
----- --------------------
-
-
-
--
------ -
--------
-----
----- ----------- --
--- --
--------
------ -------------
-------------
--------
------ --------------
--------------
--------
------ ---------------------------
------------ ---------
--------
------ --------------------------
----------- ---------
--------
---------
------
---------
--
--
------ ------- ----总结
在整个过程中，react-router-menu这个npm包可以帮助我们更加便捷的实现带有菜单的页面跳转。它体积小巧，易于配置，同时也提供了较为丰富的自定义配置。相信使用过后，你会深刻体会到其便捷性和实用性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaf81e8991b448dc3af