不可避免的问题：React 的路由如何抽离？-技术圈

嗨，我是你稳定更新、持续输出的勾勾(｡･∀･)ﾉﾞ。

在 React 开发中，不可避免地要使用路由配置。

那么问题来了！

对于路由配置你是否还记得？

如果将路由抽离出来统一管理，你有解决方案吗？

接下来我们通过三点掌握路由的抽离配置：

基本路由配置
路由如何抽离
特有的 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'));

这种写法放在项目上就显得力不从心了，最大的问题就是路由不好维护。

所以我们得需要把路由抽离出来，放在一个单独的文件里，单独维护。

路由配置抽离

我们要做的就是把配置好的路由抽离出来写在数组里统一管理。

在项目下新建一个 routes 文件夹，在里面创建一个 routes.js 文件，内容如下：


//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

了解了上面的实现原理之后，其实 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传入这个函数中即可      }    Router>  );}
export default App;

通过代码我们发现，原本一大堆的代码，现在就剩下一行了，实现起来真的简单了很多。

在后面的实现中我们就可以在 routes 里随意地写路由了，将更多繁琐的处理交给 API。

推荐阅读：

API 终结者 —— 杀手 Reflect

前端人因为 Vue3 的 Ref-sugar 提案打起来了！

点点“赞”和“在看”，保护头发，减少bug。