React.js 的路由解決方案:React Router

jopen 10年前發布 | 73K 次閱讀 JavaScript開發 React Router

React Router 一個用于 React.js 的路由解決方案(routing solution)。它輕松可以同步你的 app 和 URL,同時給嵌套,轉換,和服務端渲染一流的支持。

特性:

  • 嵌套視圖映射到嵌套路由

  • 模塊化構建路由層級

  • 同步和異步轉移掛鉤

  • 轉換中止/重定向/重試

  • 動態 segments

  • 查詢參數

  • 當.active類的路由活動時可以自動鏈接

  • Multiple root routes

  • Hash 或 HTML5 歷史 (含備份) URLs

  • 聲明重定向路由

  • 聲明未找到路由

  • 瀏覽器滾動行為帶有轉變效果

示例:

var routes = (
  <Route handler={App} path="/">
    <DefaultRoute handler={Home} />
    <Route name="about" handler={About} />
    <Route name="users" handler={Users}>
      <Route name="recent-users" path="recent" handler={RecentUsers} />
      <Route name="user" path="/user/:userId" handler={User} />
      <NotFoundRoute handler={UserRouteNotFound}/>
    </Route>
    <NotFoundRoute handler={NotFound}/>
    <Redirect from="company" to="about" />
  </Route>
);
Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});
// Or, if you'd like to use the HTML5 history API for cleaner URLs:
Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

項目主頁:http://www.baiduhome.net/lib/view/home/1440248035208

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!