从零搭建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基本配置