嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾(????)??。

在 React 開發(fā)中，不可避免地要使用路由配置。

那么問題來了！

對(duì)于路由配置你是否還記得？

如果將路由抽離出來統(tǒng)一管理，你有解決方案嗎？

接下來我們通過三點(diǎn)掌握路由的抽離配置：

• 基本路由配置

• 路由如何抽離

• 特有的 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'));

這種寫法放在項(xiàng)目上就顯得力不從心了，最大的問題就是路由不好維護(hù)。

所以我們得需要把路由抽離出來，放在一個(gè)單獨(dú)的文件里，單獨(dú)維護(hù)。

路由配置抽離

我們要做的就是把配置好的路由抽離出來寫在數(shù)組里統(tǒng)一管理。

在項(xiàng)目下新建一個(gè) routes 文件夾，在里面創(chuàng)建一個(gè) 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)=>(          <Route          key={i}          path={route.path}          exact={route.exact}          component={route.component}          />        ))      }    Router>  );}
export default App;

這樣改完之后，咱們的頁面路由依然是有效的。

特有的API

了解了上面的實(shí)現(xiàn)原理之后，其實(shí) 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傳入這個(gè)函數(shù)中即可      }    Router>  );}
export default App;

通過代碼我們發(fā)現(xiàn)，原本一大堆的代碼，現(xiàn)在就剩下一行了，實(shí)現(xiàn)起來真的簡單了很多。

在后面的實(shí)現(xiàn)中我們就可以在 routes 里隨意地寫路由了，將更多繁瑣的處理交給 API。

推薦閱讀：

技術(shù)人年度總結(jié) | 2020，注定不平凡

探索加密解密的世界

是我 Web 端配不上阿里了。

給 React 穿上美麗的‘嫁衣’

開發(fā)一個(gè)屬于自己的 web 服務(wù)器

API 終結(jié)者 —— 殺手 Reflect

前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來了！

點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。