react路由扁平化

在使用react-router-dom编写项目时，可以通过config模式来实现路由的扁平化。这种方式将路由配置集中在一处，方便维护和管理。具体做法是创建一个路由配置文件，将所有的路由信息存储在该文件中，然后在主组件中引入配置文件，通过遍历配置文件的路由信息来生成相应的路由组件。

示例代码如下：

// 路由配置文件（routeConfig.js）
import Home from './Home';
import Mine from './Mine';

const routes = [
  { path: "/", component: Home },
  { path: "/mine", component: Mine },
  // 其他路由配置...
];

export default routes;

// 主组件（App.js）
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import routes from "./routeConfig";

class App extends React.Component {
  render() {
    return (
      <Router>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} component={route.component} />
        ))}
      </Router>
    );
  }
}

export default App;

通过这种方式，我们可以将路由配置信息统一管理，便于维护和查找。同时，当需要新增或修改路由时，只需修改路由配置文件即可，无需在各个组件中进行修改。