UmiJS

五米 极快的类 Next.js 的 React 应用框架

react-router

在我们使用react-router为react项目编写路由时看起来可能是这样:

const RouteConfig = (
   window.scrollTo(0, 0)} history={browserHistory}>
    
      
      
      
      
      
      
      
      
        
        
        
        
        
      
    
  
);

umijs

而umijs支持通过约定式路由来配置, 所以看起来会是这样:

└── pages/
    ├── index.js                      # /
    ├── posts/
         ├── index.js                 # /posts
         ├── last.js                  # /posts/last
         └── $post_id/
              ├── index.js            # /posts/:post_id
              └── edit.js             # /posts/:post_id/edit
              └── comments/
                  ├── index.js        # /posts/:post_id/comments
                  └── $id.js          # /posts/:post_id/comments/:id

考虑到有些复杂的场景下约定式路由无法满足, 或者就是有人偏爱配置的方式, 所以umijs依然提供了配置式的路由.

// _routes.json
[
  {
    "path": "/",
    "exact": true,
    "component": "./components/a"
  },
  {
    "path": "/list",
    "component": "./pages/b"
  }
]

选择你喜欢的方式去配置路由, 然后umijs根据路由会在.umi文件夹下生成react-router代码

详见umijs.

使用感受

umijs是在webpack+babel+eslint+router上的封装, 这个项目作者还在不断完善中, 文档稀少. 此博客所使用的是umi 1.0版本, 我所遇到的坑都有解决办法, 但没有在文档中细说,让我花费了较多时间.