React 系列寫出優雅的路由

自前端框架風靡以來，路由一詞在前端的熱度與日俱增，他是幾乎所有前端框架的核心功能點。不同於後端，前端的路由往往需要表達更多的業務功能，例如與選單耦合、與標題耦合、與「麵包屑」耦合等等，因此很少有拆箱即用的完整方案，多多少少得二次加工一下。

優秀的框架可以縮短 90% 以上的無效開發時間，螞蟻的 umijs 是我見過最優雅的 react 應用框架，或者可以直接說是最優雅的前端解決方案（歡迎挑戰），本系列將逐步展開在其之上的應用，本文重點為「路由」，其餘部分後續系列繼續深入。

動碼之前先構想下本次我們要實現哪些功能：

路由需要耦合選單，且需要對選單的空節點自動往下補齊；

路由中總要體現模板的概念，即不同的路由允許使用不用的模板元件；

模板與頁面的關係完全交由路由組合，不再體現於元件中；

需要實現從路由中獲取當前頁面的軌跡，即「麵包屑」的功能；

實現從路由中獲取頁面標題；

上述每一點的功能都不複雜，若不追求極致，其實預設的約定式路由基本能夠滿足需求（詳情查詢官方文件，此處不做展開）。

先從選單出發，以下應當是乙個最簡潔的目錄結構：

const menu = [
]  }
];

使用遞迴補齊 child 路徑：

選單的子節點才是真正的頁面，所以若當前路徑是父節點，我們期望的是能夠自動跳轉到父節點寫的第乙個或者特定的頁面：

const redirectdata = ;
const formatredirect = item => `,
redirect: `$`
});item.children.foreach(children => );
}}};
const getredirectdata = (menudata) => ;

而後便是將自動跳轉的路徑組裝入路由節點：

const routes = [
...redirect,
/parent`,
routes: [
],},
]}];

路由配置最後需要注入配置檔案 .umirc.js：

import  from './config/plugins';
import  from './config/routes';
export default

import  from 'antd';
import react,  from 'react';
import  from 'react-container-query';
import documenttitle from 'react-document-title';
import  from '@/utils/layout';
import footer from './footer';
import context from './menucontext';
const  = layout;
class basiclayout extends purecomponent 
} = this.props;
const layout = (
);return (
)});
}}export default basiclayout;

結合路由與選單獲取麵包屑：

getbreadcrumbnamemap() ;
let path = this.props.location.pathname;
if (path.endswith('/')) 
const mergeroute = (path) => ;
}mergeroute(path.slice(0, path.lastindexof('/')));}};
const mergemenu = data => 
routermap[menuitem.path] = ;
});};
mergeroute(path);
mergemenu(this.state.menudata);
return routermap;
}

從路由中獲取 pagetitle：

getpagetitle = (path) => 
let title;
this.props.route.routes[0].routes.foreach(route => 
})return title;
};

React 系列寫出優雅的路由

mybatis plus 寫出優雅的分頁

react 動態修改路由 React中的路由設定

React路由的使用

React 系列 寫出優雅的路由

mybatis plus 寫出優雅的分頁

react 動態修改路由 React中的路由設定

React路由的使用

相關推薦

React 系列寫出優雅的路由