pinterest example is working :D

needs some polish though …
dongpei021 · Jun 10, 2015 · fd18dc8 · fd18dc8
1 parent 0ab1478
commit fd18dc8
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 27 deletions.
diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Router, Route, Link } from 'react-router';
+import { Router, Route, Link, HashHistory } from 'react-router';
 
 var App = React.createClass({
   render () {
@@ -45,7 +45,7 @@ var Task = React.createClass({
 });
 
 React.render((
-  <Router>
+  <Router history={HashHistory}>
     <Route path="/" component={App}>
       <Route path="user/:userId" component={User}>
         <Route path="tasks/:taskId" component={Task}/>

diff --git a/examples/pinterest/app.js b/examples/pinterest/app.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Router, Link } from 'react-router';
+import { HashHistory } from 'react-router/HashHistory';
 
 var pictures = [
   {id: 0, src: 'http://placekitten.com/601/601'},
@@ -19,8 +20,9 @@ var App = React.createClass({
         </p>
         <p>
           Click on an item in the feed, and see that it opens in an overlay.
-          Then refresh, and see that the image does not render inside the
-          overlay. One URL, two session dependent routes and UI :D
+          Then copy/paste it into a different browser window (Like Chrome -> Firefox),
+          and see that the image does not render inside the overlay. One URL, two
+          session dependent routes and UI :D
         </p>
 
         {this.props.children}
@@ -45,8 +47,8 @@ var Feed = React.createClass({
         <div>
           {pictures.map(picture => (
             <Link
-              href={`/pictures/${picture.id}`}
-              transitionState={{fromFeed: true}}
+              to={`/pictures/${picture.id}`}
+              state={{fromFeed: true}}
             >
               <img style={{margin: 10}} src={picture.src} height="100"/>
             </Link>
@@ -84,16 +86,16 @@ var Picture = React.createClass({
   }
 });
 
-var FeedRoute = {
-  component: Feed,
-  childRoutes: [ FeedPictureRoute ],
-};
-
 var FeedPictureRoute = {
   path: '/pictures/:id',
   component: FeedPicture
 };
 
+var FeedRoute = {
+  component: Feed,
+  childRoutes: [ FeedPictureRoute ],
+};
+
 var PictureRoute = {
   path: '/pictures/:id',
   component: Picture
@@ -106,8 +108,8 @@ var RootRoute = {
 
   indexRoute: FeedRoute,
 
-  getChildRoutes (transitionState, cb) {
-    if (transitionState.fromFeed) {
+  getChildRoutes (state, cb) {
+    if (state.fromFeed) {
       cb(null, [ FeedRoute ]);
     }
     else {
@@ -116,14 +118,17 @@ var RootRoute = {
   }
 };
 
-React.render(<Router routes={RootRoute}/>, document.getElementById('example'));
+React.render(
+  <Router history={new HashHistory('k')} children={RootRoute}/>,
+  document.getElementById('example')
+);
 
 // Wait a sec ... what's happening?
 //
 //  1. When you visit "/" `RootRoute.indexRoute` is matched,
 //     which is `FeedRoute`, and that renders `Feed`.
 //
-//  2. Then, when you click a link on the feed, it sets some `transitionState`,
+//  2. Then, when you click a link on the feed, it sets some location `state`,
 //     particularly, `fromFeed`.
 //
 //  3. The router calls `RootRoute.getChildRoutes` while matching, which

diff --git a/modules/Link.js b/modules/Link.js
@@ -39,6 +39,7 @@ export var Link = React.createClass({
     activeClassName: string,
     to: string.isRequired,
     query: object,
+    state: object,
     onClick: func
   },
 
@@ -66,7 +67,7 @@ export var Link = React.createClass({
     event.preventDefault();
 
     if (allowTransition)
-      this.context.router.transitionTo(this.props.to, this.props.query);
+      this.context.router.transitionTo(this.props.to, this.props.query, this.props.state);
   },
 
   render() {

diff --git a/modules/RoutingUtils.js b/modules/RoutingUtils.js
@@ -3,21 +3,21 @@ import { getParamNames, getPathname, getQueryString, matchPattern, stripLeadingS
 import { loopAsync, mapAsync } from './AsyncUtils';
 import Location from './Location';
 
-function getChildRoutes(route, callback) {
+function getChildRoutes(route, locationState, callback) {
   if (route.childRoutes) {
     callback(null, route.childRoutes);
   } else if (route.getChildRoutes) {
-    route.getChildRoutes(callback);
+    route.getChildRoutes(locationState, callback);
   } else {
     callback();
   }
 }
 
-function getIndexRoute(route, callback) {
+function getIndexRoute(route, locationState, callback) {
   if (route.indexRoute) {
     callback(null, route.indexRoute);
   } else if (route.getIndexRoute) {
-    route.getIndexRoute(callback);
+    route.getIndexRoute(callback, locationState);
   } else {
     callback();
   }
@@ -43,15 +43,15 @@ function createParams(paramNames, paramValues) {
   return assignParams({}, paramNames, paramValues);
 }
 
-function matchRouteDeep(route, pathname, callback) {
+function matchRouteDeep(route, pathname, locationState, callback) {
   var { remainingPathname, paramNames, paramValues } = matchPattern(route.path, pathname);
   var isExactMatch = remainingPathname === '';
 
   if (isExactMatch && route.path) {
     var params = createParams(paramNames, paramValues);
     var branch = [ route ];
 
-    getIndexRoute(route, function (error, indexRoute) {
+    getIndexRoute(route, locationState, function (error, indexRoute) {
       if (error) {
         callback(error);
       } else {
@@ -63,12 +63,12 @@ function matchRouteDeep(route, pathname, callback) {
     });
   } else if (remainingPathname != null) {
     // This route matched at least some of the path.
-    getChildRoutes(route, function (error, childRoutes) {
+    getChildRoutes(route, locationState, function (error, childRoutes) {
       if (error) {
         callback(error);
       } else if (childRoutes) {
         // Check the child routes to see if any of them match.
-        matchRoutes(childRoutes, remainingPathname, function (error, match) {
+        matchRoutes(childRoutes, remainingPathname, locationState, function (error, match) {
           if (error) {
             callback(error);
           } else if (match) {
@@ -89,11 +89,11 @@ function matchRouteDeep(route, pathname, callback) {
   }
 }
 
-function matchRoutes(routes, pathname, callback) {
+function matchRoutes(routes, pathname, locationState, callback) {
   routes = createRoutes(routes);
 
   loopAsync(routes.length, function (index, next, done) {
-    matchRouteDeep(routes[index], pathname, function (error, match) {
+    matchRouteDeep(routes[index], pathname, locationState, function (error, match) {
       if (error || match) {
         done(error, match);
       } else {
@@ -118,7 +118,7 @@ function matchRoutes(routes, pathname, callback) {
 export function getProps(routes, location, parseQueryString, callback) {
   var pathname = stripLeadingSlashes(getPathname(location.path));
 
-  matchRoutes(routes, pathname, function (error, props) {
+  matchRoutes(routes, pathname, location.state || {}, function (error, props) {
     if (error || props == null) {
       callback(error);
     } else {