从零搭建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',
            },
        ],
    },
]

View Code