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

react-router

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

const RouteConfig = (
  <Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="topics" component={TopicList} />
      <Route path="topics/no-reply" component={NoReplyTopicList} />
      <Route path="topics/popular" component={PopularTopicList} />
      <Route path="topics/recent" component={RecentTopicList} />
      <Route path="topics/node:id" component={NodeTopicList} />
      <Route path="topics/:id(/r/:reply_id)" component={TopicDetail} />
      <Route path=":id" component={User}>
        <IndexRoute component={UserTopicList} />
        <Route path="replies" component={UserReplies} />
        <Route path="favorites" component={FavoriteTopicList} />
        <Route path="followers" component={UserFollowers} />
        <Route path="following" component={UserFollowing} />
      </Route>
    </Route>
  </Router>
);

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代码

<Route exact path="/" component={require('../../components/a.js').default} />
<Route path="/list" component={require('../b.js').default}} />

详见umijs.

使用感受

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