Upgrade examples/react-router to use react-router 1.0-rc1

examples/react-router/app/app.jsx

@@ -1,5 +1,5 @@
 var React = require("react"),
-    Router = require("react-router"),
+    ReactRouter = require("react-router"),
     Fluxxor = require("../../../");
 
 var actions = require("./actions.jsx"),
@@ -9,11 +9,11 @@ var actions = require("./actions.jsx"),
 
 require("./style.less");
 
-var router = Router.create({routes: routes});
+var Router = ReactRouter.Router;
 
 var stores = {
   recipe: new RecipeStore(),
-  route: new RouteStore({router: router})
+  route: new RouteStore()
 };
 
 var flux = new Fluxxor.Flux(stores, actions.methods);
@@ -36,9 +36,14 @@ flux.actions.recipes.add(
   true
 );
 
-router.run(function(Handler) {
-  React.render(
-    <Handler flux={flux} />,
+var createElement = function(Component, props) {
+    return <Component {...props} flux={flux} />
+};
+
+var createBrowserHistory = require('history/lib/createBrowserHistory');
+var history = createBrowserHistory();
+
+React.render(
+    <Router createElement={createElement} history={history} routes={routes} />,
     document.getElementById("app")
-  );
-});
+);

examples/react-router/app/components/empty_view.jsx

@@ -1,9 +1,8 @@
 var React = require("react"),
-    Router = require("react-router"),
-    RouteHandler = Router.RouteHandler;
+    ReactRouter = require("react-router");
 
 module.exports = React.createClass({
-  render: function() {
-    return <RouteHandler {...this.props} />;
-  }
+    render: function() {
+        return <div>{this.props.children}</div>;
+    }
 });

examples/react-router/app/components/recipe.jsx

@@ -1,22 +1,23 @@
 var React = require("react"),
-    Router = require("react-router"),
-    Link = Router.Link,
+    ReactRouter = require("react-router"),
+    Link = ReactRouter.Link,
     Fluxxor = require("../../../../");
 
 var RecipeStore = require("../stores/recipe_store.jsx");
 
 var Recipe = React.createClass({
   mixins: [
     Fluxxor.FluxMixin(React),
-    Fluxxor.StoreWatchMixin("recipe")
+    Fluxxor.StoreWatchMixin("recipe"),
+    ReactRouter.State
   ],
 
   contextTypes: {
     router: React.PropTypes.func
   },
 
   getStateFromFlux: function() {
-    var params = this.context.router.getCurrentParams();
+    var params = this.props.params;
 
     return {
       recipe: this.getFlux().store("recipe").getRecipe(params.id)
@@ -47,8 +48,8 @@ var Recipe = React.createClass({
         <p dangerouslySetInnerHTML={{__html: directions}} />
 
         <p>
-          <Link to="edit-recipe" params={{id: recipe.id}}>Edit Recipe</Link>
-          {" | "}<Link to="home" onClick={this.deleteRecipe}>Delete Recipe</Link>
+          <Link to={"/recipe/" + recipe.id + "/edit"}>Edit Recipe</Link>
+          {" | "}<Link to="/" onClick={this.deleteRecipe}>Delete Recipe</Link>
         </p>
       </div>
     );
@@ -73,8 +74,8 @@ var Recipe = React.createClass({
       <div>
         {content}
         <hr />
-        <Link to="home">Home</Link>
-        {" | "}<Link to="add-recipe">Add New Recipe</Link>
+        <Link to="/">Home</Link>
+        {" | "}<Link to="/recipe/add">Add New Recipe</Link>
       </div>
     );
   },

examples/react-router/app/components/recipe_adder.jsx

@@ -1,8 +1,7 @@
 var t = require("tcomb-form"),
     React = require("react"),
-    Router = require("react-router"),
-    RouteHandler = Router.RouteHandler,
-    Link = Router.Link,
+    ReactRouter = require("react-router"),
+    Link = ReactRouter.Link,
     Fluxxor = require("../../../../");
 
 var Recipe = require("../schemas/recipe.jsx"),
@@ -33,8 +32,8 @@ var RecipeAdder = React.createClass({
       <div>
         {content}
         <hr />
-        <Link to="home">Home</Link>
-        {" | "}<Link to="add-recipe">Add New Recipe</Link>
+        <Link to="/">Home</Link>
+        {" | "}<Link to="/recipe/add">Add New Recipe</Link>
       </div>
     );
   },

examples/react-router/app/components/recipe_editor.jsx

@@ -1,8 +1,7 @@
 var t = require("tcomb-form"),
     React = require("react"),
-    Router = require("react-router"),
-    RouteHandler = Router.RouteHandler,
-    Link = Router.Link,
+    ReactRouter = require("react-router"),
+    Link = ReactRouter.Link,
     Fluxxor = require("../../../../");
 
 var Recipe = require("../schemas/recipe.jsx"),
@@ -12,15 +11,16 @@ var Recipe = require("../schemas/recipe.jsx"),
 var RecipeEditor = React.createClass({
   mixins: [
     Fluxxor.FluxMixin(React),
-    Fluxxor.StoreWatchMixin("recipe")
+    Fluxxor.StoreWatchMixin("recipe"),
+    ReactRouter.State
   ],
 
   contextTypes: {
     router: React.PropTypes.func
   },
 
   getStateFromFlux: function() {
-    var params = this.context.router.getCurrentParams();
+    var params = this.props.params;
 
     return {
       recipe: this.getFlux().store("recipe").getRecipe(params.id)
@@ -46,7 +46,7 @@ var RecipeEditor = React.createClass({
         </form>
 
         <p>
-          <Link to="home" onClick={this.deleteRecipe}>Delete Recipe</Link>
+          <Link to="/" onClick={this.deleteRecipe}>Delete Recipe</Link>
         </p>
       </div>
     );
@@ -63,8 +63,8 @@ var RecipeEditor = React.createClass({
       <div>
         {content}
         <hr />
-        <Link to="home">Home</Link>
-        {" | "}<Link to="add-recipe">Add New Recipe</Link>
+        <Link to="/">Home</Link>
+        {" | "}<Link to="/recipe/add">Add New Recipe</Link>
       </div>
     );
   },

examples/react-router/app/components/recipe_list.jsx

@@ -1,7 +1,6 @@
 var React = require("react"),
-    Router = require("react-router"),
-    RouteHandler = Router.RouteHandler,
-    Link = Router.Link,
+    ReactRouter = require("react-router"),
+    Link = ReactRouter.Link,
     Fluxxor = require("../../../../");
 
 var RecipeList = React.createClass({
@@ -19,7 +18,7 @@ var RecipeList = React.createClass({
         <h1>Recipes</h1>
         <ul>{this.state.recipes.map(this.renderRecipeLink)}</ul>
         <div>
-          <Link to="add-recipe">Add New Recipe</Link>
+          <Link to="/recipe/add">Add New Recipe</Link>
         </div>
       </div>
     );
@@ -28,7 +27,7 @@ var RecipeList = React.createClass({
   renderRecipeLink: function(recipe) {
     return (
       <li key={recipe.id}>
-        <Link to="recipe" params={{id: recipe.id}}>{recipe.name}</Link>
+        <Link to={"/recipe/" + recipe.id}>{recipe.name}</Link>
       </li>
     );
   }

examples/react-router/app/routes.jsx

@@ -1,24 +1,20 @@
 var React = require("react"),
-    Router = require("react-router"),
-    Route = Router.Route,
-    DefaultRoute = Router.DefaultRoute;
+    ReactRouter = require("react-router"),
+    Route = ReactRouter.Route,
+    IndexRoute = ReactRouter.IndexRoute;
 
-var EmptyView = require("./components/empty_view.jsx"),
-    Recipe = require("./components/recipe.jsx"),
+var Recipe = require("./components/recipe.jsx"),
     RecipeEditor = require("./components/recipe_editor.jsx"),
     RecipeAdder = require("./components/recipe_adder.jsx"),
-    RecipeList = require("./components/recipe_list.jsx");
+    RecipeList = require("./components/recipe_list.jsx"),
+    EmptyView = require("./components/empty_view.jsx");
 
 var routes = (
-  <Route handler={EmptyView} name="home" path="/">
-    <Route handler={RecipeAdder} name="add-recipe" path="/recipe/add" />
-
-    <Route handler={EmptyView} path="/recipe/:id">
-      <Route handler={RecipeEditor} name="edit-recipe" path="edit" />
-      <DefaultRoute handler={Recipe} name="recipe" />
-    </Route>
-
-    <DefaultRoute handler={RecipeList} />
+  <Route component={EmptyView} path="/">
+    <Route component={RecipeAdder} path="recipe/add" />
+    <Route component={Recipe} path="recipe/:id" />
+    <Route component={RecipeEditor} path="recipe/:id/edit" />
+    <IndexRoute component={RecipeList}/>
   </Route>
 );
 

examples/react-router/app/stores/route_store.jsx

@@ -1,8 +1,13 @@
 var Fluxxor = require("../../../../");
+var ReactRouter = require("react-router");
 
 var actions = require("../actions.jsx");
 
+var History = ReactRouter.History;
+
 var RouteStore = Fluxxor.createStore({
+  mixins: [History],
+
   initialize: function(options) {
     this.router = options.router;
 
@@ -15,7 +20,7 @@ var RouteStore = Fluxxor.createStore({
     var path = payload.path,
         params = payload.params;
 
-    this.router.transitionTo(path, params);
+    this.history.pushState(null, path, params);
   }
 });
 

examples/react-router/webpack.config.js

@@ -4,6 +4,7 @@ module.exports = {
   cache: true,
   entry: "./app/app.jsx",
   output: {
+    publicPath: "/",
     path: __dirname + "/app",
     filename: "bundle.js"
   },

package.json

@@ -24,15 +24,16 @@
     "chai": "^1.9.1",
     "css-loader": "^0.6.12",
     "envify": "^1.2.1",
+    "history": "~1.9.1 ",
     "jsdom": "~3.1.2",
     "json-loader": "^0.5.0",
     "jsx-loader": "^0.12.0",
     "jsxhint": "^0.5.0",
     "less": "^1.7.0",
     "less-loader": "^0.7.3",
     "mocha": "^2.2.1",
-    "react": "^0.13.0",
-    "react-router": "^0.13.0",
+    "react": "^0.13.3",
+    "react-router": "^1.0.0-rc1",
     "sinon": "^1.9.1",
     "sinon-chai": "^2.5.0",
     "style-loader": "^0.6.3",