目錄
引言
第一章：項(xiàng)目創(chuàng)建勿决、antd、less
第二章：路由攔截招盲、路由嵌套
第三章：狀態(tài)管理 Redux
第四章：網(wǎng)絡(luò)請(qǐng)求低缩、代理、mockjs
第五章：webpack配置
第六章：Eslint
源碼地址
https://github.com/dxn920128/cms-base
安裝react-router-dom
npm install -S react-router-dom@5.3.0 @types/react-router-dom
路由模式
HashRouter：使用的是URL的hash部分（即window.location.hash）曹货，來保持頁面的UI與URL的同步咆繁。
BrowserRouter：使用HTML5的history API（pushState, replaceState和popState），讓頁面的UI與URL同步顶籽。
一級(jí)路由
一級(jí)路由主要作用判斷是否登錄玩般，未登錄跳轉(zhuǎn)到登錄界面。
<HashRouter>
<Switch>
<Route path="/login" component={Login} />
<Route
path="/"
render={() => {
//根據(jù)登錄token礼饱、登錄有效期等判斷是否登錄坏为。
if (isLogin()) {
return <Frame />;
} else {
return <Redirect to="/login" />;
}
}}
/>
</Switch>
</HashRouter>
二級(jí)路由
二級(jí)路由就是管理系統(tǒng)的功能路由路由究驴。
const routes = [
{
path: '/home',
component: Home
},
{
path: '/404',
component: Error
},
{
path: '/system-account',
component: SystemAccount
},
{
path: '/system-permission',
component: Permission
}
]
<Switch location={location}>
<Redirect exact from="/" to={config.HOME_ROUTER_PATH} />
{routes.map(route => {
return <Route component={route.component} key={route.path} path={route.path} />
})}
<Redirect to="/404" />
</Switch>
左側(cè)菜單
{
icon: 'Audit',
name: '首頁',
menuId: '1',
type: '0',
url: '',
childList: [
{
menuId: '2',
name: '首頁',
url: '/home',
type: '1'
}
]
},
{
menuId: '3',
type: '0',
icon: 'Audit',
name: '系統(tǒng)設(shè)置',
url: '',
childList: [
{
menuId: '4',
name: '賬號(hào)管理',
type: '1',
url: '/system-account'
},
{
menuId: '5',
name: '權(quán)限分配',
type: '1',
url: '/system-permission'
}
]
}
}
<Menu>
<Menu.Item key={item.menuId} icon={<UserOutlined />}>
<Link to={item.url}>{item.name}</Link>
</Menu.Item>
<Menu.Item key={item.menuId} icon={<UserOutlined />}>
<Link to={item.url}>{item.name}</Link>
</Menu.Item>
...
</Menu>
效果圖
首頁.png
