上次寫了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
