React Router

This example demonstrates the techniques explained in the routing guide, utilizing React Router to provide a client-side routing solution. The code for this example can be found on GitHub.

The route definition and run block for this app looks like this:

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>
);

var flux = new Fluxxor.Flux(...);

Router.run(routes, function(Handler) {
  React.render(
    <Handler flux={flux} />,
    document.getElementById("app")
  );
});