上次写了vue+Vue Router多级导航切换路由(页面)，发现还有人看，这次就写一个reactJs版的切换路由。
还是秉承着能公用，不重复的思路，将侧导航做成公共组件。将导航做成父页面组件，将切换的页面做成子页面，这样只需调用一次即可。大大减少了后期维护的麻烦
涉及功能点
- 导航支持多级
- reactJs Router
- 子父组件的写法
- 样式：ant.designUI
- Loadable路由懒加载
效果图
01-10-14_27_46.gif
目录结构
TIM截图20190110143836.png
- app.js是主页面
- main.js是我进行一些模块，变量全局处理的文件
- router下的config.js是路由统一管理的地方
- Menu下的index是导航组件
- contentMain是渲染切换页面的地方
reactJs Router的安装与使用
安装npm install --save react-router-dom
引入import {BrowserRouter} from 'react-router-dom';
本文还用到了路由懒加载
npm install --save react-loadable
上代码！
---app.js
import React, {Component} from 'react';
//全局文件
import './main';
//路由
import {BrowserRouter} from 'react-router-dom';
//布局组件
import CustomMenu from "./components/Menu/index";//导航
import ContentMain from './components/ContentMain'//主题
//UI-antd-按需引入
import 'antd/dist/antd.css';
import {Layout } from 'antd';
const {
Sider, Content,
} = Layout;
let screenHeight= window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
class App extends Component {
render() {
return (
<div className="App" >
<BrowserRouter>
<Layout>
<Sider className="App-customMenu" style={{height:screenHeight}}>
<CustomMenu/>
</Sider>
<Layout>
{/*<Header>Header</Header>*/}
<Content className="App-contentMain" style={{height:screenHeight}}>
<ContentMain/>
</Content>
{/*<Footer>Footer</Footer>*/}
</Layout>
</Layout>
</BrowserRouter>
</div>
);
}
}
export default App;
导航组件menu
注意
global.menus是导航的菜单数据，我这里定义的是全局变量，实际项目时也可以是后台接口请求过来的。
global.menus = [
{
title: '首页',
icon: 'page',
key: '/'
}, {
title: '其它',
icon: 'bulb',
key: '/page/Other',
subs: [
{key: '/page/AlertDemo', title: '弹出框', icon: ''},
]
},
]
renderSubMenu是处理子菜单的方法。renderMenuItem是最子级菜单的路由渲染方法。
Menu是antdUI的组件，其他形式可去其官网了解
import React from 'react'
import {Link} from 'react-router-dom';
import {Menu, Icon} from 'antd';
const menus =global.menus;
//此组件的意义就是将数据抽离出来，通过传递数据去渲染
class CustomMenu extends React.Component {
renderSubMenu = ({key, icon, title, subs}) => {
return (
<Menu.SubMenu key={key} title={<span>{icon && <Icon type={icon}/>}<span>{title}</span></span>}>
{
subs && subs.map(item => {
return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
})
}
</Menu.SubMenu>
)
}
renderMenuItem = ({key, icon, title,}) => {
return (
<Menu.Item key={key}>
<Link to={key}>
{icon && <Icon type={icon}/>}
<span>{title}</span>
</Link>
</Menu.Item>
)
}
render() {
return (
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
>
{
menus.map(item => {
return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
})
}
</Menu>
)
}
}
export default CustomMenu
---主体渲染组件-CustomMenu
注意
path里的路径，要和你的菜单路径保持一致，这样才能匹配渲染
import React from 'react'
//引入路由
import {Route, Switch} from 'react-router-dom'
class ContentMain extends React.Component {
render() {
return (
<div>
<Switch>
<Route exact path='/' component={global.Main}/>
<Route exact path='/page/general/fromDemo' component={global.FromDemo}/>
<Route exact path='/page/AlertDemo' component={global.Alert}/>
<Route exact path='/page/TableDemo' component={global.Table}/>
<Route exact path='/page/HttpDemo' component={global.HttpDemo}/>
<Route exact path='/page/TreeDemo' component={global.TreeDemo}/>
</Switch>
</div>
)
}
}
export default ContentMain
---路由管理文件
具体路径你自己来定，我这里只做展示
注
Loading也是个组件是展示加载效果的。
//Loadable插件需使用Loading
import Loadable from 'react-loadable'
import Loading from '../components/Loading/index';
//定义路由
global.Main = Loadable({
loader: () => import('../page/index'),
loading: Loading,
});
//表单
当当当 到此就整个导航切换的就完成了，有哪里不明白可以留言，如果帮助到你，就点个赞收个藏吧~~~ 嘻嘻嘻。
有更好的写法欢迎交流讨论~~
github上有完整代码，有帮助请给星星哟~
https://github.com/zccone/reactRouterDemo
