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