五米 極快的類 Next.js 的 React 應(yīng)用框架

react-router

在我們使用react-router為react項(xiàng)目編寫路由時(shí)看起來可能是這樣:

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支持通過約定式路由來配置, 所以看起來會(huì)是這樣:

└── 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

考慮到有些復(fù)雜的場(chǎng)景下約定式路由無法滿足, 或者就是有人偏愛配置的方式, 所以u(píng)mijs依然提供了配置式的路由.

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

選擇你喜歡的方式去配置路由, 然后umijs根據(jù)路由會(huì)在.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上的封裝, 這個(gè)項(xiàng)目作者還在不斷完善中, 文檔稀少. 此博客所使用的是umi 1.0版本, 我所遇到的坑都有解決辦法, 但沒有在文檔中細(xì)說,讓我花費(fèi)了較多時(shí)間.