React.js 的路由解决方案:React Router
jopen
9年前
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); });