不可避免的問題：React 的路由如何抽離？
嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾(????)??。
在 React 開發(fā)中，不可避免地要使用路由配置。
那么問題來了！
對于路由配置你是否還記得？
如果將路由抽離出來統(tǒng)一管理，你有解決方案嗎？
接下來我們通過三點掌握路由的抽離配置：
基本路由配置
路由如何抽離
特有的 API
基本路由配置
安裝 react-router-dom ??
npm i react-router-dom它里面給我們提供了很多組件 API。
地址：https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom/docs/api
基本配置方式：
//App.jsimport Home from "./Home/Home"import Login from "./Login/Login"import { BrowserRouter as Router, Route } from "react-router-dom";function App() {return (<Router><Route exact path="/"><Home />Route><Route path="/login"><Login />Route>Router>);}export default App;
index.js：
//index.jsimport App from './App';ReactDOM.render(<ConfigProvider locale={zhCN}><App/>ConfigProvider>,document.getElementById('root'));
這種寫法放在項目上就顯得力不從心了，最大的問題就是路由不好維護(hù)。
所以我們得需要把路由抽離出來，放在一個單獨的文件里，單獨維護(hù)。
路由配置抽離
我們要做的就是把配置好的路由抽離出來寫在數(shù)組里統(tǒng)一管理。
在項目下新建一個 routes 文件夾，在里面創(chuàng)建一個 routes.js 文件，內(nèi)容如下：
//App.jsimport { BrowserRouter as Router, Route } from "react-router-dom";import "./App.less"import Home from "./Home/Home"import Login from "./Login/Login"import routes from "./router/routes"function App() {return (<Router>{routes.map((route,i)=>(<Routekey={i}path={route.path}exact={route.exact}component={route.component}/>))}Router>);}export default App;
這樣改完之后，咱們的頁面路由依然是有效的。
特有的API
了解了上面的實現(xiàn)原理之后，其實 react-router 也有一套來管理路由的模塊，叫 react-router-config。
我們下載一下。?
npm install react-router-config然后在 App.js 中：
//App.jsimport { BrowserRouter as Router, Route } from "react-router-dom";import { renderRoutes } from "react-router-config";import "./App.less"import Home from "./Home/Home"import Login from "./Login/Login"import routes from "./router/routes"function App() {return (<Router>{renderRoutes(routes) // 將routes傳入這個函數(shù)中即可}Router>);}export default App;
通過代碼我們發(fā)現(xiàn)，原本一大堆的代碼，現(xiàn)在就剩下一行了，實現(xiàn)起來真的簡單了很多。
在后面的實現(xiàn)中我們就可以在 routes 里隨意地寫路由了，將更多繁瑣的處理交給 API。
推薦閱讀：
技術(shù)人年度總結(jié) | 2020，注定不平凡
前端人因為 Vue3 的 Ref-sugar 提案打起來了！
點點“贊”和“在看”，保護(hù)頭發(fā)，減少bug。