Merge pull request #177 from ant-design/breadcrumb-react-router-1.x

Fit breadcrumb to react-router@1.x, close #172

components/breadcrumb/demo/router.md

@@ -2,16 +2,17 @@
 
 - order: 2
 
-和 `react-router@0.13.x` 进行结合使用。
+和 `react-router@1.0.0-beta3` 进行结合使用。
 
 ---
 
 ````jsx
-var Router = require('react-router');
-var Route = Router.Route;
-var Link = Router.Link;
-var RouteHandler = Router.RouteHandler;
-var Breadcrumb = require('antd/lib/breadcrumb');
+var ReactRouter = require('react-router');
+var history = require('react-router/lib/HashHistory').history;
+var Router = ReactRouter.Router;
+var Route = ReactRouter.Route;
+var Link = ReactRouter.Link;
+var Breadcrumb = require('antd').Breadcrumb;
 
 var Apps = React.createClass({
   render() {
@@ -22,36 +23,34 @@ var Apps = React.createClass({
   }
 });
 
-var App = React.createClass({
+var Home = React.createClass({
   render() {
     return (<div>
       <div className="demo-nav">
         <Link to="/">首页</Link>
         <Link to="/apps">应用列表</Link>
       </div>
-      <RouteHandler />
+      {this.props.children || 'Home'}
       <div style={{
         marginBottom: 15,
         marginTop: 15,
         paddingBottom: 15,
         borderBottom: '1px dashed #ccc'
       }}>点击上面的导航切换页面，面包屑在下面：</div>
-      <Breadcrumb Router={Router} />
+      <Breadcrumb router={ReactRouter} />
     </div>);
   }
 });
 
-var routes = (
-  <Route name="首页" path="/" handler={App} ignoreScrollBehavior>
-    <Route name="应用列表" path="/apps" handler={Apps}>
-      <Route name="应用:id" path="/apps/:id" handler={App} />
+React.render((
+  <Router history={history}>
+    <Route name="首页" path="/" component={Home} ignoreScrollBehavior>
+      <Route name="应用列表" path="apps" component={Apps}>
+        <Route name="应用:id" path=":id" />
       </Route>
     </Route>
-);
-
-Router.run(routes, Router.HashLocation, (Root) => {
-  React.render(<Root />, document.getElementById('components-breadcrumb-demo-router'));
-});
+  </Router>
+), document.getElementById('components-breadcrumb-demo-router'));
 ````
 
 <style>

components/breadcrumb/index.jsx

@@ -15,14 +15,15 @@ let BreadcrumbItem = React.createClass({
 
 let Breadcrumb = React.createClass({
   contextTypes: {
-    router: React.PropTypes.func
+    router: React.PropTypes.object
   },
   render() {
-    var crumbs, routes, params;
-    if (this.context.router && this.props.Router) {
-      var Link = this.props.Router.Link;
-      routes = this.context.router.getCurrentRoutes();
-      params = this.context.router.getCurrentParams();
+    let crumbs, routes, params;
+    let ReactRouter = this.props.router;
+    if (this.context.router && ReactRouter) {
+      var Link = ReactRouter.Link;
+      routes = this.context.router.state.branch;
+      params = this.context.router.state.params;
       crumbs = routes.map(function(route, i) {
         var name = route.name.replace(/\:(.*)/g, function(replacement, key) {
           return params[key] || replacement;

scripts/demo.js

@@ -1,5 +1,6 @@
 window['css-animation'] = require('css-animation');
-window['react-router'] = window.ReactRouter;
+window['react-router'] = require('react-router');
+window['react-router']['HashHistory'] = require('react-router/lib/HashHistory');
 var antd = require('antd');
 
 var $ = require('jquery');

site/templates/layout.html

@@ -33,7 +33,7 @@
         }
       })(this.console = this.console || {});
     </script>
-    <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.1.10/es5-shim.js,es5-shim/4.1.10/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js"></script>
+    <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.1.10/es5-shim.js,es5-shim/4.1.10/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js"></script>
     <script>
       var ANT_COMPONENTS = [];
       {%- for item in resource.pages|find_category(["CSS","Components"]) %}