React的路由，怎麼開發得勁兒

首先肯定業務場景

若是咱們把場景設定在開發一個pc端管理後臺的話，那麼很常見的需求就是根據不一樣用戶，配置不一樣的權限，顯示不一樣的菜單項目，渲染不一樣的路由。

那權限到底歸誰管

通常來講都是後臺配置權限，而後驅動前端顯示菜單，但我以爲這樣不太好，加一個menu就要向後臺申請，太不靈活，費勁兒。

我以爲應該也給前臺必定程度的權利，讓其能夠「繞過」後臺主導一部分菜單項和路由項的渲染.

__一言以蔽之__：

先後臺協同把事情辦了，後臺爲主，前端爲輔。

基於以上分析，制定了一個解決方案

首先列出一下「出場角色」：

動態結構數據 ：經過先後臺協同建立數據，其描述的是一種樹狀關係。

靜態內容數據 ：渲染路由和菜單項的基本數據信息。

菜單項和其關聯的路由 ：根據以上數據驅動顯示。

靜態內容配置

主要爲兩個成員:

• 路由配置：routesMap

• 菜單項配置：menusMap

  兩者相關性過高，故在一塊兒進行管理。

路由配置：routesMap

做用：

每個路由都是一個單體對象，經過註冊routesMap內部來進行統一管理。

結構：

{
    ...
    {
        name: "commonTitle_nest",               //國際化單位ID
        icon: "thunderbolt",                    //antd的icon
        path: "/pageCenter/nestRoute",          //路徑規則
        exact: true,                            //是否嚴格匹配
        component: lazyImport(() =>
            import('ROUTES/login')
        ),                                      //組件
        key: uuid()                             //惟一標識
    }
    ...
}

個體參數一覽：

參數	類型	說明	默認值
name	string	國際化的標識ID	_
icon	string	antd的icon標識	-
path	string	路徑規則	-
exact	boolan	是否嚴格匹配	false
component	string	渲染組件	-
key	string	惟一標識	-
redirect	string	重定向路由地址	-
search	object	"?="	-
param	string	number	"/*"	-
isNoFormat	boolean	標識拒絕國際化	false

基本是在react-router基礎上進行擴展的，保留了其配置項。

菜單項配置：menusMap

做用：

每一個顯示在左側的菜單項目都是一個單體對象，菜單單體內容與路由對象進行關聯，並經過註冊routesToMenuMap內部來進行統一管理。

結構：

{
    ...
     [LIGHT_ID]: {
        ...routesMap.lightHome,
        routes: [
            routesMap.lightAdd,
            routesMap.lightEdit,
            routesMap.lightDetail,
        ],
    }
    ...
}

個體參數一覽：

參數	類型	說明	默認值
routes	array	轉載路由個體	_

該個體主要關聯路由個體，故其參數基本與之一致

動態結構配置

主要爲兩個類別：

• __menuLocalConfig.json__：前端指望的驅動數據。
• __menuRemoteConfig.json__：後端指望的驅動數據。

做用：

__動靜結合，驅動顯示__：兩文件融合做爲動態數據，去激活靜態數據（菜單項menusMap）來驅動顯示菜單項目和渲染路由組件。

強調：

• __menuLocalConfig.json__：是動態數據的組成部份，是「動」中的「靜」，徹底由前端主導配置。
• __menuRemoteConfig.json__：應該由後臺配置權限並提供，前端配置該數據文件，目的是在後臺未返回數據做默認配置，還有模擬mock開發使用。

結構：

[   
    ...
    {
            "menuId": 2001,
            "parentId": 1001
    }
    ...
]

簡單，直接地去表示結構的數據集合

動態配置的解釋：

簡單講，對於驅動菜單項和路由的渲染，不管後臺配置權限控制前端也好，前端想繞事後端主導顯示也好，都是一種指望（種因）。兩者協商，結合，用盡量少的信息描述一個結構（枝繁），從而讓靜態數據對其進行補充（葉茂），而後再用造成的總體去驅動（結果）。

快速上手

註冊路由個體

位置在/src/routes/config.js,慄：

/* 路由的註冊數據，新建路由在這配置 */
export const routesMap = {
    ...
    templates: {
        name: "commonTitle_nest",
        icon: "thunderbolt",
        path: "/pageCenter/nestRoute",
        exact: true,
        redirect: "/pageCenter/light",
        key: uuid()
    }
    ...
}

詳：/路由相關/配置/靜態內容配置

決定該路由個體的「出場」

位置同上,慄：

/* 路由匹配menu的註冊數據，新建後臺驅動的menu在這配置 */
export const menusMap = {
    ...
    [LIGHT_ID]: {
        ...routesMap.lightHome,         //「主角」
        routes: [
            routesMap.lightAdd,         //「配角」
            routesMap.lightEdit,
            routesMap.lightDetail,
        ],
    },
    ...
}

解：首先路由個體出如今該配置中，就說明出場（驅動渲染route）了，可是出場又分爲兩種：

類別	驅動顯示了左側 MenuItem	能夠跳轉麼
主角	有	能夠
配角	沒有	能夠

以上就已經完成了靜態數據的準備，接下來就等動態結構數據類激活它了。

配置動態結構數據

後臺配置的權限：

[
  { "menuId": 1002, "parentId": 0 },
  { "menuId": 1001, "parentId": 0 }
]

主導

前端自定義的權限:

[
  { "menuId": 2002, "parentId": 1001 },
  { "menuId": 2001, "parentId": 1001 },
  { "menuId": 2003, "parentId": 0 },
  { "menuId": 2004, "parentId": 1002 },
  { "menuId": 2005, "parentId": 1002 }
]

補充

解：1***和2***分別是後臺和前臺的命名約定(能區分就行，怎麼定隨意)，經過以上數據不難看出兩者結合描述了一個樹狀關係，進而去激活靜態數據以驅動渲染頁面的菜單和路由。

簡單講：就是動態數據描述結構，靜態數據描述內容，結構去和內容進行匹配，有就顯示，沒有也不會出問題，兩者配合驅動顯示。

至此配置基本完成，能夠經過直接修改該文件的方式進行開發和調整，也能夠可視化操做。

配置調整費勁？拖拽吧

操做後自動刷新。
<p align="center">
<img style="

width: 80%;

" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99a4283e26e848c08f1f217d51c96956~tplv-k3u1fbpfcp-zoom-1.image">
</p>

自動生成文件

menuLocalConfig.json

menuRemoteConfig.json

總結：

這樣我以爲react的路由開發起來得勁兒了很多，總體的解決方案已經肯定，供參考。

項目地址