umijs有什么好处_UmiJS

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