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

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

那么问题来了！

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

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

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

• 基本路由配置

• 路由如何抽离

• 特有的 API

基本路由配置

安装 react-router-dom

npm i react-router-dom

它里面给我们提供了很多组件 API。

基本配置方式：

//App.js
import 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.js
import App from './App';
ReactDOM.render(<ConfigProvider locale={zhCN}>
  <App/>
</ConfigProvider>,
document.getElementById('root'));

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

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

路由配置抽离

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

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

//App.js
import { 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.js
import { 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。