Merge remote-tracking branch 'ff/master'

Author: anything-sys

README.md

@@ -18,6 +18,8 @@ thought, not an after-thought.
 - [Changelog](/CHANGELOG.md)
 - [#react-router channel on reactiflux](http://www.reactiflux.com/)
 
+**Note:** *If you are still using React Router 0.13.x [the docs](https://github.com/rackt/react-router/tree/0.13.x/docs/guides) can be found on [the 0.13.x branch](https://github.com/rackt/react-router/tree/0.13.x).*
+
 ### Browser Support
 
 We support all browsers and environments where React runs.

UPGRADE_GUIDE.md

@@ -55,6 +55,10 @@ let history = createBrowserHistory()
 React.render(<Router history={history}>{routes}</Router>, el)
 ```
 
+After updating to 1.0.0 you will notice that a magic querystring entry starts appearing in your URLs called "_k". An example of how it looks is this: `?_k=umhx1s`.  
+
+This is not a bug - this is intended. You can read more about the feature [here](https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#what-is-that-_kckuvup-junk-in-the-url) and how to opt out [here](https://rackt.github.io/history/stable/HashHistoryCaveats.html).
+
 ### Route Config
 
 You can still nest your routes as before, paths are inherited from
@@ -116,11 +120,11 @@ since it's simple with a `*` path.
 #### "active" class
 
 In 0.13.x links added the "active" class by default which you could
-override with `activeClassName`, or provide `activeStyles`. Most links
+override with `activeClassName`, or provide `activeStyle`s. Most links
 don't need this and the check is (currently) expensive.
 
 Links no longer add the "active" class by default, you opt-in by
-providing one; if no `activeClassName` or `activeStyles` are provided,
+providing one; if no `activeClassName` or `activeStyle`s are provided,
 the link will not check if it's active.
 
 ```js

docs/Introduction.md

@@ -113,7 +113,7 @@ const App = React.createClass({
     return (
       <div>
         <h1>App</h1>
-        {/* change the <a>s to <Links>s */}
+        {/* change the <a>s to <Link>s */}
         <ul>
           <li><Link to="/about">About</Link></li>
           <li><Link to="/inbox">Inbox</Link></li>

docs/README.md

@@ -2,7 +2,16 @@
 
 * [Introduction](/docs/Introduction.md)
 * [Basics](/docs/guides/basics/README.md)
+ * [Route Configuration](/docs/guides/basics/RouteConfiguration.md)
+ * [Route Matching](/docs/guides/basics/RouteMatching.md)
+ * [Histories](/docs/guides/basics/Histories.md)
+ * [Index Routes and Links](/docs/guides/basics/IndexRoutes.md)
 * [Advanced Usage](/docs/guides/advanced/README.md)
+ * [Dynamic Routing](/docs/guides/advanced/DynamicRouting.md)
+ * [Confirming Navigation](/docs/guides/advanced/ConfirmingNavigation.md)
+ * [Server Rendering](/docs/guides/advanced/ServerRendering.md)
+ * [Component Lifecycle](/docs/guides/advanced/ComponentLifecycle.md)
+ * [Navigating Outside of Components](/docs/guides/advanced/NavigatingOutsideOfComponents.md)
 * [Upgrade Guide](/UPGRADE_GUIDE.md)
 * [Troubleshooting](/docs/Troubleshooting.md)
 * [API](/docs/API.md)

docs/guides/advanced/ServerRendering.md

@@ -1,44 +1,38 @@
 # Server Rendering
 
-Server rendering is a bit different than in a client because you'll want
-to:
+Server rendering is a bit different than in a client because you'll want to:
 
 - Send `500` responses for errors
 - Send `30x` responses for redirects
 - Fetch data before rendering (and use the router to help you do it)
 
-To facilitate these needs, you drop one level lower than the [`<Router/>`](/docs/API.md#Router)
-API with:  
+To facilitate these needs, you drop one level lower than the [`<Router>`](/docs/API.md#Router) API with:  
 
-- `createLocation` from the history package
 - `match` to match the routes to a location without rendering
 - `RoutingContext` for synchronous rendering of route components
 
 It looks something like this with an imaginary JavaScript server:
 
 ```js
-import createLocation from 'history/lib/createLocation'
-import { RoutingContext, match } from 'react-router'
-import routes from './routes'
 import { renderToString } from 'react-dom/server'
+import { match, RoutingContext } from 'react-router'
+import routes from './routes'
 
 serve((req, res) => {
-  let location = createLocation(req.url)
-
-  match({ routes, location }, (error, redirectLocation, renderProps) => {
-    if (redirectLocation)
-      res.redirect(301, redirectLocation.pathname + redirectLocation.search)
-    else if (error)
+  // Note that req.url here should be the full URL path from
+  // the original request, including the query string.
+  match(req.url, (error, redirectLocation, renderProps) => {
+    if (redirectLocation) {
+      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
+    } else if (error) {
       res.send(500, error.message)
-    else if (renderProps == null)
+    } else if (renderProps == null) {
       res.send(404, 'Not found')
-    else
-      res.send(renderToString(<RoutingContext {...renderProps}/>))
+    } else {
+      res.send(200, renderToString(<RoutingContext {...renderProps} />))
+    }
   })
 })
 ```
 
-For data loading, you can use the `renderProps` argument to build whatever
-convention you want--like adding static `load` methods to your route
-components, or putting data loading functions on the routes, it's up to
-you.
+For data loading, you can use the `renderProps` argument to build whatever convention you want--like adding static `load` methods to your route components, or putting data loading functions on the routes--it's up to you.

docs/guides/basics/README.md

@@ -3,3 +3,4 @@
 * [Route Configuration](RouteConfiguration.md)
 * [Route Matching](RouteMatching.md)
 * [Histories](Histories.md)
+* [Index Routes and Links](IndexRoutes.md)

modules/__tests__/matchRoutes-test.js

@@ -4,13 +4,14 @@ import Route from '../Route'
 
 import assert from 'assert'
 import expect from 'expect'
-import { createLocation } from 'history'
+import { createMemoryHistory } from 'history'
 import { createRoutes } from '../RouteUtils'
 import matchRoutes from '../matchRoutes'
 
 describe('matchRoutes', function () {
 
   let routes, RootRoute, UsersRoute, UsersIndexRoute, UserRoute, PostRoute, FilesRoute, AboutRoute, TeamRoute, ProfileRoute, CatchAllRoute
+  let createLocation = createMemoryHistory().createLocation
   beforeEach(function () {
     /*
     <Route>

modules/__tests__/serverRendering-test.js

@@ -2,9 +2,8 @@
 /*eslint react/prop-types: 0*/
 import expect from 'expect'
 import React from 'react'
-import createLocation from 'history/lib/createLocation'
-import RoutingContext from '../RoutingContext'
 import match from '../match'
+import RoutingContext from '../RoutingContext'
 import Link from '../Link'
 
 describe('server rendering', function () {
@@ -71,8 +70,7 @@ describe('server rendering', function () {
   })
 
   it('works', function (done) {
-    const location = createLocation('/dashboard')
-    match({ routes, location }, function (error, redirectLocation, renderProps) {
+    match({ routes, location: '/dashboard' }, function (error, redirectLocation, renderProps) {
       const string = React.renderToString(
         <RoutingContext {...renderProps} />
       )
@@ -82,8 +80,7 @@ describe('server rendering', function () {
   })
 
   it('renders active Links as active', function (done) {
-    const location = createLocation('/about')
-    match({ routes, location }, function (error, redirectLocation, renderProps) {
+    match({ routes, location: '/about' }, function (error, redirectLocation, renderProps) {
       const string = React.renderToString(
         <RoutingContext {...renderProps} />
       )
@@ -94,8 +91,7 @@ describe('server rendering', function () {
   })
 
   it('sends the redirect location', function (done) {
-    const location = createLocation('/company')
-    match({ routes, location }, function (error, redirectLocation) {
+    match({ routes, location: '/company' }, function (error, redirectLocation) {
       expect(redirectLocation).toExist()
       expect(redirectLocation.pathname).toEqual('/about')
       expect(redirectLocation.search).toEqual('')
@@ -106,11 +102,10 @@ describe('server rendering', function () {
   })
 
   it('sends null values when no routes match', function (done) {
-    const location = createLocation('/no-match')
-    match({ routes, location }, function (error, redirectLocation, state) {
-      expect(error).toBe(null)
-      expect(redirectLocation).toBe(null)
-      expect(state).toBe(null)
+    match({ routes, location: '/no-match' }, function (error, redirectLocation, state) {
+      expect(error).toNotExist()
+      expect(redirectLocation).toNotExist()
+      expect(state).toNotExist()
       done()
     })
   })

modules/__tests__/transitionHooks-test.js

@@ -3,6 +3,7 @@
 import expect, { spyOn } from 'expect'
 import React from 'react'
 import createHistory from 'history/lib/createMemoryHistory'
+import useQueries from 'history/lib/useQueries'
 import execSteps from './execSteps'
 import Router from '../Router'
 
@@ -193,4 +194,19 @@ describe('When a router enters a branch', function () {
     })
   })
 
+  describe('and then the query changes', function () {
+    it('calls the onEnter hooks of all routes in that branch', function (done) {
+      const newsFeedRouteEnterSpy = spyOn(NewsFeedRoute, 'onEnter').andCallThrough()
+      const history = useQueries(createHistory)('/inbox')
+
+      React.render(<Router history={history} routes={routes}/>, node, function () {
+        history.pushState(null, '/news', { q: 1 })
+        expect(newsFeedRouteEnterSpy.calls.length).toEqual(1)
+        history.pushState(null, '/news', { q: 2 })
+        expect(newsFeedRouteEnterSpy.calls.length).toEqual(2)
+        done()
+      })
+    })
+  })
+
 })

modules/computeChangedRoutes.js

@@ -11,11 +11,17 @@ function routeParamsChanged(route, prevState, nextState) {
   })
 }
 
+function routeQueryChanged(prevState, nextState) {
+  return prevState.location.search !== nextState.location.search
+}
+
 /**
  * Returns an object of { leaveRoutes, enterRoutes } determined by
  * the change from prevState to nextState. We leave routes if either
  * 1) they are not in the next state or 2) they are in the next state
- * but their params have changed (i.e. /users/123 => /users/456).
+ * but their params have changed (i.e. /users/123 => /users/456) or
+ * 3) they are in the next state but the query has changed 
+ * (i.e. /search?query=foo => /search?query=bar)
  *
  * leaveRoutes are ordered starting at the leaf route of the tree
  * we're leaving up to the common parent route. enterRoutes are ordered
@@ -28,7 +34,9 @@ function computeChangedRoutes(prevState, nextState) {
   let leaveRoutes, enterRoutes
   if (prevRoutes) {
     leaveRoutes = prevRoutes.filter(function (route) {
-      return nextRoutes.indexOf(route) === -1 || routeParamsChanged(route, prevState, nextState)
+      return nextRoutes.indexOf(route) === -1
+        || routeParamsChanged(route, prevState, nextState)
+        || routeQueryChanged(prevState, nextState)
     })
 
     // onLeave hooks start at the leaf route.