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

jopen 4年前

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.open-open.com/lib/view/home/1440248035208