从零搭建React+TypeScript的后台项目(二)
本章节主要讲解一种后台实现React-router配置的实现方案。react-router官方文档。
一、骨架初始化
由于React没有像Vue那样将Router单独进行封装。所以使用React进行开发时,Router的实现方案最好也用专门的路由文件进行管理,不然route要是散落在每个业务组件中,对于代码维护成本是极高的。下面我们讲解一种后台管理系统比较常见的Menu菜单和Route搭配使用的方案。
安装react-router-dom,是基于react-router操作dom实现一个路由库。
yarn react-router-dom
然后在根组件app.tsx中使用Router包裹项目骨架层。
// App.tsx import { HashRouter as Router } from 'react-router-dom' function App() { return ( <div className="App"> <Router> <BaseLayout/> </Router> </div> ); }
接下来我们使用antd中的Layout组件实现页面基本骨架,包括Header、Navside、Content基本结构。
// BaseLayout.tsx class BaseLayout extends React.Component<object, object> { render() { return( <Layout className="main"> <Layout.Header className="main-header"><Header/></Layout.Header> <Layout className="main-content"> <Navside/> <Layout.Content><Routes/></Layout.Content> </Layout> </Layout> ) } }
接下来我们只需要封装两个组件。Navside菜单栏,控制路由跳转;Routes动态匹配路由,渲染当前组件。
二、全局router文件
我们先在src下新建router文件夹,新建index.tsx文件存放页面路由信息:
const Routes: MenuItem[] = [ { key: '/main/index', title: '首页', icon: 'bank', component: 'HomeData' }, { key: '/main/table', title: '表格', icon: 'book', component: 'BaseTable' }, { key: '/main/message', title: '消息', icon: 'bulb', component: 'Messsage' }, { key: '/main/auth', title: '权限', icon: 'bug', component: 'Auth' }, { key: '/main/staff', title: '员工', icon: 'audio', component: 'Staff' }, { key: '/main/setting', title: '设置', icon: 'rocket', subs: [ { key: '/main/setting/usercenter', title: '个人中心', component: 'Usercenter', }, { key: '/main/setting/expand', title: '功能扩展', component: 'Expand', }, ], }, ]
MenuItem是TypeScript定义的接口,等下再讲。
三、Navside组件实现路由跳转
组件Naviside中通过Link实现一级、二级菜单跳转路由:
import routes from '@/router/index' import { Link } from 'react-router-dom' // 渲染link菜单 function renderMenuItem(menu: BaseMenu) { return( <Menu.Item key={menu.key}> <Link to={menu.key}> {menu.icon&&<Icon type={menu.icon}/>} <span>{menu.title}</span> </Link> </Menu.Item> ) } // 渲染有子菜单的subMenu function renderSubMenu(subMenu: MenuItem) { return( <Menu.SubMenu key={subMenu.key} title={ <span> {subMenu.icon && <Icon type={subMenu.icon} />} <span>{subMenu.title}</span> </span> } > {subMenu.subs&&subMenu.subs.map((menu: BaseMenu) => renderMenuItem(menu))} </Menu.SubMenu> ) }
四、routes实现路由匹配渲染组件
接下来通过内置route组件实现路由、组件渲染功能。
// routes.tsx class Routes extends React.Component{ render() { return( <Switch> {routes.map((r: MenuItem) => { const router = (r: BaseMenu) => { return <Route key={r.key} path={r.key} component={components[r.component||'']}/> } return r.component ?router(r) :r.subs&&r.subs.map(i=>router(i)) })} </Switch> ) } } // components视图组件 import HomeData from './homeData/homeData' const components: any = { HomeData } export default components
这样就实现了menu菜单栏进行路由跳转,并且渲染相应组件的功能。
这是一个系列文章:
从零搭建React+TypeScript的后台项目(一)--构建基础React+TypeScript项目
从零搭建React+TypeScript的后台项目(二)--后台router实现方案
从零搭建React+TypeScript的后台项目(三)--Redux基本配置