作為主流框架，本人比較喜歡react風(fēng)格宿礁，引入導(dǎo)入可能多些代碼案铺，相比Vue更為完整
選擇antd作為web后臺(tái)管理系統(tǒng)框架，其一是ant的UI好看窘拯，其二組件完善
不論是新手還是老手都比較愿意去使用ant红且，彩蛋事件忽略
本文主要是講react框架上后臺(tái)管理系統(tǒng)路由設(shè)計(jì)，ant并非項(xiàng)目必須
主要使用react-router-dom 4.0模塊涤姊，
- 實(shí)現(xiàn)一套路由配置同時(shí)兼容路由和導(dǎo)航條的渲染暇番，其中借鑒了Vue Router的config的寫法
- 實(shí)現(xiàn)登錄驗(yàn)證
- 用戶管理權(quán)限部分
/* 使用Mobx作為狀態(tài)管理 */
作為本人設(shè)計(jì)筆記，也供在線點(diǎn)評(píng)
嵌套路由
例：
這里有一個(gè)后臺(tái)管理系統(tǒng)思喊，通常這套系統(tǒng)會(huì)有主頁壁酬、用戶管理兩個(gè)頁面，用戶管理里面會(huì)有用戶詳情，修改編輯這類
那么我們會(huì)定義用戶管理頁面的path：/user舆乔，用戶詳情/user/detail岳服，單個(gè)用戶的情況下/user/detail/:id，這樣的寫法希俩。
當(dāng)我們用戶詳情下面再有什么單獨(dú)頁面顯示吊宋，那么就會(huì)出現(xiàn)/user/detail/:id/**這類，那么這種就需要嵌套路由
使用react-router-dom完成嵌套路由,具體寫法
<Switch>
<Route path="/index" />
<Route path="/user">
<Switch>
<Route path="/user/detail/:id" component={ /*子路由組件 */ }></Route>
/* 希望路由只針對(duì)某個(gè)用戶颜武，而非針對(duì)用戶的訪問情況璃搜，需要跳轉(zhuǎn)到相應(yīng)上級(jí)頁面 */
<Route render={ () => <Redirect to="/user" /> } />
</Switch>
</Route>
</Switch>
以上即為路由的嵌套寫法
導(dǎo)航部分：
image.png
如這樣，用戶管理鳞上，下面有其他項(xiàng)这吻，經(jīng)過分析，路由與導(dǎo)航是可以統(tǒng)一配置的
那么為了統(tǒng)一篙议，方便配置（少量代碼唾糯，做更多有趣的事），我們會(huì)定義一個(gè)json鬼贱，同時(shí)去處理路由與nav
簡(jiǎn)單定義一個(gè)RouterConfig.js文件移怯，
export default [
{
path : '/home', // 一級(jí)路由path
meta : '主頁', // 導(dǎo)航名稱
icon : '', // 所用icon
role : [], // 適用權(quán)限
// 所用組件
component : sync(() => import( /* webpackChunkName: 'home' */ '@/Pages/Home/index.js')),
children : [ //二級(jí)路由
{
path : '/one', //二級(jí)路由path ，react將會(huì)渲染為/home/one
meta : '嵌套1',
icon : '',
role : [],
component : sync(() => import ( /* webpackChunkName: 'home_page_one' */ '@/Pages/Home/one')),
children : []
},
{
path : '/two',
meta : '嵌套2',
icon : '',
role : [],
component : sync(() => import ( /* webpackChunkName: 'home_page_one' */ '@/Pages/Home/two')),
children : [],
},
],
},
{
path : '/user',
meta : '用戶',
icon : '',
role : [],
component : sync(() => import( /* webpackChunkName: 'user' */ '@/Pages/User/index.js')),
children : [
{
path : '/one',
meta : '嵌套1',
icon : '',
role : [],
component : sync(() => import ( /* webpackChunkName: 'user_page_one' */ '@/Pages/User/one')),
children : [],
},
{
path : '/two',
meta : '嵌套2',
icon : '',
role : [],
component : sync(() => import ( /* webpackChunkName: 'user_page_two' */ '@/Pages/User/two')),
children : [],
},
]
}
]
是不是更像是一個(gè)Vue Router 配置呢
直面React-router-dom 路由全部配置
import RouterConfig from 'RouterConfig.js'
class RouterComponent extends React.component {
render () {
return (
<Switch>
{
RouterConfig.map(
router => {
return (
<Route
path={ router.path }
key={ router.path }
component={
props => {
return (
<RouteComponent
router={ router }
{ ...props }
/>
)
}
}
/>
)
}
)
}
</Switch>
)
}
}
一級(jí)路由
export const RouteComponent = props => {
return (
<Switch>
{
props.router.children.map (
router => {
return (
<Route
path={ props.match.url + router.path }
key={ router.path }
{ ...props }
component={
npx => {
return (
<RouteChildrenComponent
router={ router }
{ ...npx }
/>
)
}
}
/>
)
}
)
}
{
<Route
component={
() => {
return <Container { ...props } component={ props.router.component } />
}
}
/>
}
</Switch>
)
}
子路由
export const RouteChildrenComponent = props => {
return (
<Switch>
{
props.router.children.map(
npx => {
return (
<Route
path={ npx.path ? props.match.url + npx.path : '' }
key={ npx.meta }
component={
props => {
return (
<Container { ...props } component={ npx.component } />
)
}
}
/>
)
}
)
}
{
props.router.component ?
(
<Route
render={
() => {
return (
<Container { ...props } component={ props.router.component } />
)
}
}
/>
)
: <Route render={ () => <Redirect to='/login' /> } />
}
</Switch>
)
}
渲染導(dǎo)航
class MenuComponent extends React.Component {
render () {
let collapsed = this.props.store.collapsed
let store = this.props.store;
const defaultOpenKeys = router.map( item => item.path )
return (
<Menu
defaultSelectedKeys={ [ this.props.location.pathname ] }
theme="dark"
defaultOpenKeys={ defaultOpenKeys }
mode="inline"
inlineCollapsed={ collapsed }
>
{
router.map(
npx => {
return (
<SubMenu
key={ npx.path }
title={
<span>
<Icon type={ npx.icon ? npx.icon : 'user' } />
<span>{ npx.meta }</span>
</span>
}
>
{
/*這里并未做權(quán)限驗(yàn)證吩愧，只是做了個(gè)基本的應(yīng)用*/
npx.role === '' || store[npx.role] ?
<MenuItem
key={ npx.path }
onClick = {
() => this.props.history.push( npx.path )
}
>
{ npx.meta }
</MenuItem> : ''
}
{
npx.children.map(
item => {
/*這里并未做權(quán)限驗(yàn)證芋酌，只是做了個(gè)基本的應(yīng)用*/
return (
store[ item.role ] || item.role === '' ? (
<Menu.Item
key={ npx.path + item.path }
onClick={
() => this.props.history.push( npx.path + item.path )
}
>
{ item.meta }
</Menu.Item>
) : ''
)
}
)
}
</SubMenu>
)
}
)
}
</Menu>
)
}
}
一個(gè)Vue 路由配置拿到React的小例子，寫好配置就是做好渲染就可以啦雁佳，so，是需要去看代碼的同云。
git:
https://github.com/wulibaibao/react-antd-demo
個(gè)人博客:
https://www.wulibaibao.com
