[changed] Split <Routes> component from <Route>

Fixes #112.

Test Plan: Loaded each of the examples and clicked
around. npm test too.

Author: sophiebits

README.md

@@ -66,32 +66,38 @@ Usage
 var Route = require('react-router').Route;
 
 React.renderComponent((
-  <Route handler={App}>
-    <Route name="about" handler={About}/>
-    <Route name="users" handler={Users}>
-      <Route name="user" path="/user/:userId" handler={User}/>
+  <Routes>
+    <Route handler={App}>
+      <Route name="about" handler={About}/>
+      <Route name="users" handler={Users}>
+        <Route name="user" path="/user/:userId" handler={User}/>
+      </Route>
     </Route>
-  </Route>
+  </Routes>
 ), document.body);
 ```
 
 Or if JSX isn't your jam:
 
 ```js
 React.renderComponent((
-  Route({handler: App},
-    Route({name: "about", handler: About}),
-    Route({name: "users", handler: Users},
-      Route({name: "user", path: "/user/:userId", handler: User})
+  Routes({}, 
+    Route({handler: App},
+      Route({name: "about", handler: About}),
+      Route({name: "users", handler: Users},
+        Route({name: "user", path: "/user/:userId", handler: User})
+      )
     )
   )
 ), document.body);
 ```
 
-- Urls will be matched to the deepest route, and then all the routes up
+- URLs will be matched to the deepest route, and then all the routes up
 the hierarchy are activated and their "handlers" (normal React
 components) will be rendered.
 
+- Paths are assumed from names unless specified.
+
 - Each handler will receive a `params` property containing the matched
 parameters form the url, like `:userId`.
 
@@ -194,24 +200,33 @@ Related Modules
 API
 ---
 
+### Routes (component)
+
+Configuration component for your router, all `<Route/>`s must be
+children of a `<Routes/>`. It is the component you provide to
+`React.renderComponent(routes, el)`.
+
+#### Props
+
+**location** - `"hash"` or `"history"`, defaults to `"hash"`. Configures
+what type of url you want, hash includes `#/` in the url and works
+without a server, if you use `history` your server will need to support
+it.
+
 ### Route (component)
 
 Configuration component to declare your application's routes and view hierarchy.
 
 #### Props
 
-**location** - The method to use for page navigation when initializing the router.
-May be either "hash" to use URLs with hashes in them and the `hashchange` event or
-"history" to use the HTML5 history API. This prop is only ever used on the root
-route that is rendered into the page. The default is "hash".
-
 **name** - The name of the route, used in the `Link` component and the
 router's transition methods.
 
 **path** - The path used in the URL, supporting dynamic segments. If
-left undefined, the path will be defined by the `name`. This path is always
-absolute from the URL "root", even if the leading slash is left off. Nested
-routes do not inherit the path of their parent.
+left undefined, the path will be defined by the `name`, and if there is
+no name, will default to `/`. This path is always absolute from the URL
+"root", even if the leading slash is left off. Nested routes do not
+inherit the path of their parent.
 
 **handler** - The component to be rendered when the route matches.
 
@@ -225,14 +240,17 @@ passing in any additional props as needed.
 #### Examples
 
 ```xml
-<Route handler={App}>
-  <!-- path is automatically assigned to the name since it is omitted -->
-  <Route name="about" handler={About}/>
-  <Route name="users" handler={Users}>
-    <!-- note the dynamic segment in the path -->
-    <Route name="user" handler={User} path="/user/:id"/>
+<Routes>
+  <!-- path defaults to '/' since no name or path provided -->
+  <Route handler={App}>
+    <!-- path is automatically assigned to the name since it is omitted -->
+    <Route name="about" handler={About}/>
+    <Route name="users" handler={Users}>
+      <!-- note the dynamic segment in the path -->
+      <Route name="user" handler={User} path="/user/:id"/>
+    </Route>
   </Route>
-</Route>
+</Routes>
 ```
 
 Or w/o JSX:

examples/auth-flow/app.js

@@ -2,6 +2,7 @@
 var React = require('react');
 var Router = require('../../modules/main');
 var Route = Router.Route;
+var Routes = Router.Routes;
 var Link = Router.Link;
 
 var App = React.createClass({
@@ -179,12 +180,14 @@ function pretendRequest(email, pass, cb) {
 
 
 var routes = (
-  <Route handler={App}>
-    <Route name="login" handler={Login}/>
-    <Route name="logout" handler={Logout}/>
-    <Route name="about" handler={About}/>
-    <Route name="dashboard" handler={Dashboard}/>
-  </Route>
+  <Routes>
+    <Route handler={App}>
+      <Route name="login" handler={Login}/>
+      <Route name="logout" handler={Logout}/>
+      <Route name="about" handler={About}/>
+      <Route name="dashboard" handler={Dashboard}/>
+    </Route>
+  </Routes>
 );
 
 React.renderComponent(routes, document.body);

examples/data-flow/app.js

@@ -2,6 +2,7 @@
 var React = require('react');
 var Router = require('../../modules/main');
 var Route = Router.Route;
+var Routes = Router.Routes;
 var Link = Router.Link;
 
 var App = React.createClass({
@@ -64,9 +65,11 @@ var Taco = React.createClass({
 });
 
 var routes = (
-  <Route handler={App}>
-    <Route name="taco" path="taco/:name" handler={Taco}/>
-  </Route>
+  <Routes>
+    <Route handler={App}>
+      <Route name="taco" path="taco/:name" handler={Taco}/>
+    </Route>
+  </Routes>
 );
 
 React.renderComponent(routes, document.body);

examples/dynamic-segments/app.js

@@ -2,6 +2,7 @@
 var React = require('react');
 var Router = require('../../modules/main');
 var Route = Router.Route;
+var Routes = Router.Routes;
 var Link = Router.Link;
 
 var App = React.createClass({
@@ -45,11 +46,13 @@ var Task = React.createClass({
 });
 
 var routes = (
-  <Route handler={App}>
-    <Route name="user" path="/user/:userId" handler={User}>
-      <Route name="task" path="/user/:userId/tasks/:taskId" handler={Task}/>
+  <Routes>
+    <Route handler={App}>
+      <Route name="user" path="/user/:userId" handler={User}>
+        <Route name="task" path="/user/:userId/tasks/:taskId" handler={Task}/>
+      </Route>
     </Route>
-  </Route>
+  </Routes>
 );
 
 React.renderComponent(routes, document.body);

examples/master-detail/app.js

@@ -2,6 +2,7 @@
 var React = require('react');
 var Router = require('../../modules/main');
 var Route = Router.Route;
+var Routes = Router.Routes;
 var Link = Router.Link;
 
 var api = 'http://addressbook-api.herokuapp.com/contacts';
@@ -203,11 +204,13 @@ var NotFound = React.createClass({
 });
 
 var routes = (
-  <Route handler={App}>
-    <Route name="new" path="contact/new" handler={NewContact}/>
-    <Route name="not-found" path="contact/not-found" handler={NotFound}/>
-    <Route name="contact" path="contact/:id" handler={Contact}/>
-  </Route>
+  <Routes>
+    <Route handler={App}>
+      <Route name="new" path="contact/new" handler={NewContact}/>
+      <Route name="not-found" path="contact/not-found" handler={NotFound}/>
+      <Route name="contact" path="contact/:id" handler={Contact}/>
+    </Route>
+  </Routes>
 );
 
 React.renderComponent(routes, document.body);

examples/partial-app-loading/app.js

@@ -2,6 +2,7 @@
 var React = require('react');
 var Router = require('../../modules/main');
 var Route = Router.Route;
+var Routes = Router.Routes;
 var Link = Router.Link;
 
 var AsyncReactComponent = {
@@ -59,11 +60,13 @@ var App = React.createClass({
 });
 
 var routes = (
-  <Route handler={App}>
-    <Route name="dashboard" path="dashboard" handler={PreDashboard}>
-      <Route name="inbox" path="dashboard/inbox" handler={PreInbox}/>
+  <Routes>
+    <Route handler={App}>
+      <Route name="dashboard" path="dashboard" handler={PreDashboard}>
+        <Route name="inbox" path="dashboard/inbox" handler={PreInbox}/>
+      </Route>
     </Route>
-  </Route>
+  </Routes>
 );
 
 React.renderComponent(routes, document.body);

examples/query-params/app.js

@@ -2,6 +2,7 @@
 var React = require('react');
 var Router = require('../../modules/main');
 var Route = Router.Route;
+var Routes = Router.Routes;
 var Link = Router.Link;
 
 var App = React.createClass({
@@ -32,9 +33,11 @@ var User = React.createClass({
 });
 
 var routes = (
-  <Route handler={App}>
-    <Route name="user" path="user/:userId" handler={User}/>
-  </Route>
+  <Routes>
+    <Route handler={App}>
+      <Route name="user" path="user/:userId" handler={User}/>
+    </Route>
+  </Routes>
 );
 
 React.renderComponent(routes, document.body);

examples/shared-root/app.js

@@ -2,6 +2,7 @@
 var React = require('react');
 var Router = require('../../modules/main');
 var Route = Router.Route;
+var Routes = Router.Routes;
 var Link = Router.Link;
 
 var App = React.createClass({
@@ -66,15 +67,17 @@ var ForgotPassword = React.createClass({
 });
 
 var routes = (
-  <Route handler={App}>
-    <Route handler={SignedOut}>
-      <Route name="signin" handler={SignIn}/>
-      <Route name="forgot-password" handler={ForgotPassword}/>
+  <Routes>
+    <Route handler={App}>
+      <Route handler={SignedOut}>
+        <Route name="signin" handler={SignIn}/>
+        <Route name="forgot-password" handler={ForgotPassword}/>
+      </Route>
+      <Route handler={SignedIn}>
+        <Route name="home" handler={Home}/>
+      </Route>
     </Route>
-    <Route handler={SignedIn}>
-      <Route name="home" handler={Home}/>
-    </Route>
-  </Route>
+  </Routes>
 );
 
 React.renderComponent(routes, document.body);

examples/shared-root/index.html

@@ -1,4 +1,5 @@
 <!doctype html public "superawesome">
 <title>Shared Root Example</title>
+<link rel="stylesheet" href="../app.css"/>
 <body>
 <script src="../build/shared-root.js"></script>

examples/simple-master-detail/app.js

@@ -2,6 +2,7 @@
 var React = require('react');
 var Router = require('../../modules/main');
 var Route = Router.Route;
+var Routes = Router.Routes;
 var Link = Router.Link;
 
 var App = React.createClass({
@@ -50,9 +51,11 @@ var State = React.createClass({
 });
 
 var routes = (
-  <Route handler={App}>
-    <Route name="state" path="state/:abbr" handler={State}/>
-  </Route>
+  <Routes>
+    <Route handler={App}>
+      <Route name="state" path="state/:abbr" handler={State}/>
+    </Route>
+  </Routes>
 );
 
 React.renderComponent(routes, document.body);

examples/transitions/app.js

@@ -2,6 +2,7 @@
 var React = require('react');
 var Router = require('../../modules/main');
 var Route = Router.Route;
+var Routes = Router.Routes;
 var Link = Router.Link;
 
 var App = React.createClass({
@@ -55,10 +56,12 @@ var Form = React.createClass({
 });
 
 var routes = (
-  <Route handler={App}>
-    <Route name="dashboard" handler={Dashboard}/>
-    <Route name="form" handler={Form}/>
-  </Route>
+  <Routes>
+    <Route handler={App}>
+      <Route name="dashboard" handler={Dashboard}/>
+      <Route name="form" handler={Form}/>
+    </Route>
+  </Routes>
 );
 
 React.renderComponent(routes, document.body);