Merge branch 'master' into next

Author: taion

docs/API.md

@@ -333,7 +333,7 @@ Called on routes when the location changes, but the route itself neither enters
 
 If `callback` is listed as a 4th argument, this hook will run asynchronously, and the transition will block until `callback` is called.
 
-##### `onLeave()`
+##### `onLeave(prevState)`
 Called when a route is about to be exited.
 
 

docs/Glossary.md

@@ -11,9 +11,9 @@ This is a glossary of common terms used in the React Router codebase and documen
 * [LocationDescriptor](#locationdescriptor)
 * [LocationKey](#locationkey)
 * [LocationState](#locationstate)
+* [Params](#params)
 * [Path](#path)
 * [Pathname](#pathname)
-* [Params](#params)
 * [Query](#query)
 * [QueryString](#querystring)
 * [RedirectFunction](#redirectfunction)
@@ -66,10 +66,10 @@ A *hash* is a string that represents the hash portion of the URL. It is synonymo
 ## LeaveHook
 
 ```js
-type LeaveHook = () => any;
+type LeaveHook = (prevState: RouterState) => any;
 ```
 
-A *leave hook* is a user-defined function that is called when a route is about to be unmounted.
+A *leave hook* is a user-defined function that is called when a route is about to be unmounted. It receives the previous [router state](#routerstate) as its first argument. 
 
 ## Location
 
@@ -127,6 +127,14 @@ This type gets its name from the first argument to HTML5's [`pushState`][pushSta
 [pushState]: https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method
 [replaceState]: https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method
 
+## Params
+
+```js
+type Params = Object;
+```
+
+The word *params* refers to an object of key/value pairs that were parsed out of the original URL's [pathname](#pathname). The values of this object are typically strings, unless there is more than one param with the same name in which case the value is an array.
+
 ## Path
 
 ```js
@@ -143,14 +151,6 @@ type Pathname = string;
 
 A *pathname* is the portion of a URL that describes a hierarchical path, including the preceding `/`. For example, in `http://example.com/the/path?the=query`, `/the/path` is the pathname. It is synonymous with `window.location.pathname` in web browsers.
 
-## QueryString
-
-```js
-type QueryString = string;
-```
-
-A *query string* is the portion of the URL that follows the [pathname](#pathname), including any preceding `?`. For example, in `http://example.com/the/path?the=query`, `?the=query` is the query string. It is synonymous with `window.location.search` in web browsers.
-
 ## Query
 
 ```js
@@ -159,13 +159,13 @@ type Query = Object;
 
 A *query* is the parsed version of a [query string](#querystring).
 
-## Params
+## QueryString
 
 ```js
-type Params = Object;
+type QueryString = string;
 ```
 
-The word *params* refers to an object of key/value pairs that were parsed out of the original URL's [pathname](#pathname). The values of this object are typically strings, unless there is more than one param with the same name in which case the value is an array.
+A *query string* is the portion of the URL that follows the [pathname](#pathname), including any preceding `?`. For example, in `http://example.com/the/path?the=query`, `?the=query` is the query string. It is synonymous with `window.location.search` in web browsers.
 
 ## RedirectFunction
 
@@ -204,6 +204,8 @@ The term *route component* refers to a [component](#component) that is directly
   - `route` – The [route](#route) that declared this component
   - `routeParams` – A subset of the [params](#params) that were specified in the route's [`path`](#routepattern)
 
+Route components should generally be component classes rather than strings. This will avoid potential issues with passing the injected props above to DOM components.
+
 ## RouteConfig
 
 ```js

docs/guides/RouteConfiguration.md

@@ -106,7 +106,7 @@ URL                     | Components
 
 ### Decoupling the UI from the URL
 
-It would be nice if we could remove the `/inbox` segment from the `/inbox/messages/:id` URL pattern, but still render `Message` nested inside the `App -> Inbox` UI. Absolute `path`s let us do exactly that.
+It would be nice if we could remove the `/inbox` segment from the `/inbox/messages/:id` URL pattern, but still render `Message` nested inside the `App -> Inbox` UI. Pathless routes let us do exactly that.
 
 ```js
 render((
@@ -125,7 +125,7 @@ render((
 ), document.body)
 ```
 
-The ability to use absolute paths in deeply nested routes gives us complete control over what the URL looks like! We don't have to add more segments to the URL just to get nested UI.
+The ability to use declare routes without paths gives us complete control over what the URL looks like! We don't have to add more segments to the URL just to get nested UI.
 
 We can now render the following URLs:
 
@@ -136,8 +136,6 @@ URL                     | Components
 `/inbox`                | `App -> Inbox`
 `/messages/:id`         | `App -> Inbox -> Message`
 
-**Note**: Absolute paths may not be used in route config that is [dynamically loaded](/docs/guides/DynamicRouting.md).
-
 ### Preserving URLs
 
 Wait a minute ... we just changed a URL! [That's not cool](http://www.w3.org/Provider/Style/URI.html). Now everyone who had a link to `/inbox/messages/5` has a **broken link**. :(
@@ -184,7 +182,7 @@ Continuing with our example above, if a user clicked on a link to `/about` from
 
 Since [routes](/docs/Glossary.md#route) are usually nested, it's useful to use a concise nested syntax like [JSX](https://facebook.github.io/jsx/) to describe their relationship to one another. However, you may also use an array of plain [route](/docs/Glossary.md#route) objects if you prefer to avoid using JSX.
 
-The `<Redirect>` configuration helper is not available when using plain routes, so you have to set up the redirect using the `onEnter` hook. 
+The `<Redirect>` configuration helper is not available when using plain routes, so you have to set up the redirect using the `onEnter` hook.
 
 The route config we've discussed up to this point could also be specified like this:
 

examples/active-links/app.js

@@ -2,6 +2,8 @@ import React from 'react'
 import { render } from 'react-dom'
 import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
 
+import withExampleBasename from '../withExampleBasename'
+
 const ACTIVE = { color: 'red' }
 
 const App = ({ children }) => (
@@ -57,7 +59,7 @@ const About = () => (
 )
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index}/>
       <Route path="/about" component={About}/>

examples/active-links/index.html

@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Active Links Example</title>
-<base href="/active-links"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Active Links</h1>

examples/animations/app.js

@@ -1,7 +1,10 @@
 import React from 'react'
-import { render } from 'react-dom'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import { render } from 'react-dom'
 import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
+
+import withExampleBasename from '../withExampleBasename'
+
 import './app.css'
 
 const App = ({ children, location }) => (
@@ -46,7 +49,7 @@ const Page2 = () => (
 )
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index}/>
       <Route path="page1" component={Page1} />

examples/animations/index.html

@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Animation Example</title>
-<base href="/animations"/>
 <link href="/global.css" rel="stylesheet"/>
 <link href="/animations/app.css" rel="stylesheet"/>
 <body>

examples/auth-flow-async-with-query-params/app.js

@@ -1,8 +1,8 @@
 import React, { createClass } from 'react'
 import { render } from 'react-dom'
-import {
-  Router, Route, IndexRoute, browserHistory, Link, withRouter
-} from 'react-router'
+import { Router, Route, IndexRoute, browserHistory, Link, withRouter } from 'react-router'
+
+import withExampleBasename from '../withExampleBasename'
 
 function App(props) {
   return (
@@ -88,7 +88,7 @@ function serverAuth(authToken) {
 }
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Form} />
       <Route path="page" component={Page} onEnter={requireCredentials}/>

examples/auth-flow-async-with-query-params/index.html

@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <base href="/auth-flow-async-with-query-params"/>
     <meta charset="utf-8">
     <title>Authentication with query parameters</title>
     <link rel="stylesheet" href="/global.css"/>

examples/auth-flow/app.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, withRouter } from 'react-router'
+
+import withExampleBasename from '../withExampleBasename'
 import auth from './auth'
 
 const App = React.createClass({
@@ -125,7 +127,7 @@ function requireAuth(nextState, replace) {
 }
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="login" component={Login} />
       <Route path="logout" component={Logout} />