Add context.route.location (#4589)

* Add context.route.location

The default `context.route.location` value is the same as
`context.history.location`. However, if a <Route> has a `location` prop,
then all of its children will see that location object as
`context.route.location`.

This also updates the `<Switch>` component to pass its location as a prop to the
component that it renders.

* Add a modal example

* Pass correct location to Route's rendered component

* pass context to Route's computeMatch

When calling computeMatch from componentWillReceiveProps, we need to use nextContext, not this.context

* Fix websites example to work with new Route prop signature

Author: pshrmn

packages/react-router-website/modules/components/Examples.js

@@ -61,6 +61,11 @@ const EXAMPLES = [
     path: '/examples/route-config',
     load: require('bundle?lazy!babel!../examples/RouteConfig'),
     loadSource: require('bundle?lazy!!prismjs?lang=jsx!../examples/RouteConfig.js')
+  },
+  { name: 'Modal Gallery',
+    path: '/examples/modal-gallery',
+    load: require('bundle?lazy!babel!../examples/ModalGallery'),
+    loadSource: require('bundle?lazy!!prismjs?lang=jsx!../examples/ModalGallery.js')
   }
 ]
 

packages/react-router-website/modules/examples/Auth.js

@@ -40,11 +40,11 @@ const fakeAuth = {
   }
 }
 
-const AuthButton = withRouter(({ push }) => (
+const AuthButton = withRouter(({ history }) => (
   fakeAuth.isAuthenticated ? (
     <p>
       Welcome! <button onClick={() => {
-        fakeAuth.signout(() => push('/'))
+        fakeAuth.signout(() => history.push('/'))
       }}>Sign out</button>
     </p>
   ) : (

packages/react-router-website/modules/examples/ModalGallery.js

@@ -0,0 +1,151 @@
+import React from 'react'
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from 'react-router-dom'
+
+
+const IMAGES = [
+  { id: 0, title: 'Dark Orchid', color: 'DarkOrchid' },
+  { id: 1, title: 'Lime Green', color: 'LimeGreen' },
+  { id: 2, title: 'Gold', color: 'Gold' },
+  { id: 3, title: 'Midnight Blue', color: 'MidnightBlue' },
+  { id: 4, title: 'Dark Slate Gray', color: 'DarkSlateGray' },
+  { id: 5, title: 'Tomato', color: 'Tomato' },
+  { id: 6, title: 'Seven Ate Nine', color: '#789' },
+  { id: 7, title: 'Olive Drab', color: 'OliveDrab' },
+  { id: 8, title: 'Crimson', color: 'Crimson' },
+  { id: 9, title: 'Sea Green', color: 'SeaGreen' }
+]
+
+const Thumbnail = ({ color }) =>
+  <div style={{ width: 50, height: 50, background: color }}></div>
+
+const Image = ({ color }) =>
+  <div style={{ width: '100%', height: 400, background: color }}></div>
+
+const Home = () => (
+  <div>
+    <Link to='/gallery'>Visit the Gallery</Link>
+    <h2>Featured Images</h2>
+    <ul>
+      <li><Link to='/img/5'>Tomato</Link></li>
+      <li><Link to='/img/9'>Sea Green</Link></li>
+    </ul>
+  </div>
+)
+
+const Gallery = () => (
+  <div>
+    {
+      IMAGES.map(i => (
+        <Link
+          key={i.id}
+          to={{ pathname: `/img/${i.id}`, state: { modal: true} }}
+        >
+          <Thumbnail color={i.color} />
+          <p>{i.title}</p>
+        </Link>
+      ))
+    }
+  </div>
+)
+
+const ImageView = ({ match }) => {
+  const image = IMAGES[parseInt(match.params.id, 10)]
+  if (!image) {
+    return <div>Image not found</div>
+  }
+
+  return (
+    <div>
+      <h1>{image.title}</h1>
+      <Image color={image.color} />
+    </div>
+  )
+}
+
+const Modal = ({ match, history }) => {
+  const image = IMAGES[parseInt(match.params.id, 10)]
+  if (!image) {
+    return null
+  }
+  const back = (e) => {
+    e.stopPropagation()
+    history.goBack()
+  }
+  return (
+    <div
+      onClick={back}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        background: 'rgba(0, 0, 0, 0.15)'
+      }}
+    >
+      <div className='modal' style={{
+      position: 'absolute',
+        background: '#fff',
+        top: 25,
+        left: '10%',
+        right: '10%',
+        padding: 15,
+        border: '2px solid #444'
+      }}>
+        <h1>{image.title}</h1>
+        <Image color={image.color} />
+        <button type='button' onClick={back}>
+          Close
+        </button>
+      </div>
+    </div>
+  )
+}
+
+class ModalSwitch extends React.Component {
+
+  componentWillMount() {
+    // set the initial previousLocation value on mount
+    this.previousLocation = this.props.location
+  }
+
+  componentWillUpdate(nextProps) {
+    const { location } = this.props
+    // set previousLocation if props.location is not modal
+    if (nextProps.history.action !== 'POP' && (!location.state || !location.state.modal)) {
+      this.previousLocation = this.props.location
+    }
+  }
+
+  render() {
+    const { location } = this.props
+    const isModal = !!(
+      location.state &&
+      location.state.modal &&
+      this.previousLocation !== location
+    )
+    return (
+      <div>
+        <Switch location={isModal ? this.previousLocation : location}>
+          <Route exact path='/' component={Home}/>
+          <Route path='/gallery' component={Gallery}/>
+          <Route path='/img/:id' component={ImageView}/>
+        </Switch>
+        { isModal ? <Route path='/img/:id' component={Modal} /> : null}
+      </div>
+    )
+  }
+}
+
+const ModalGallery = () => (
+  <Router>
+    <Route component={ModalSwitch} />
+  </Router>
+)
+
+export default ModalGallery

packages/react-router/modules/Route.js

@@ -7,7 +7,8 @@ import matchPath from './matchPath'
  */
 class Route extends React.Component {
   static contextTypes = {
-    history: PropTypes.object.isRequired
+    history: PropTypes.object.isRequired,
+    route: PropTypes.object.isRequired
   }
 
   static propTypes = {
@@ -31,26 +32,26 @@ class Route extends React.Component {
   getChildContext() {
     return {
       route: {
-        location: this.props.location || this.context.history.location,
+        location: this.props.location || this.context.route.location,
         match: this.state.match
       }
     }
   }
 
   state = {
-    match: this.computeMatch(this.props)
+    match: this.computeMatch(this.props, this.context)
   }
 
-  computeMatch({ computedMatch, location, path, strict, exact }) {
+  computeMatch({ computedMatch, location, path, strict, exact }, { route }) {
     if (computedMatch)
       return computedMatch // <Switch> already computed the match for us
 
-    const pathname = (location || this.context.history.location).pathname
+    const pathname = (location || route.location).pathname
 
     return matchPath(pathname, { path, strict, exact })
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps, nextContext) {
     warning(
       !(nextProps.location && !this.props.location),
       '<Route> elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.'
@@ -62,15 +63,15 @@ class Route extends React.Component {
     )
 
     this.setState({
-      match: this.computeMatch(nextProps)
+      match: this.computeMatch(nextProps, nextContext)
     })
   }
 
   render() {
     const { match } = this.state
     const { children, component, render } = this.props
-    const { history } = this.context
-    const { location } = history
+    const { history, route } = this.context
+    const location = this.props.location || route.location
     const props = { match, location, history }
 
     return (

packages/react-router/modules/Router.js

@@ -20,6 +20,7 @@ class Router extends React.Component {
     return {
       history: this.props.history,
       route: {
+        location: this.props.history.location,
         match: this.state.match
       }
     }

packages/react-router/modules/Switch.js

@@ -7,7 +7,7 @@ import matchPath from './matchPath'
  */
 class Switch extends React.Component {
   static contextTypes = {
-    history: PropTypes.object.isRequired
+    route: PropTypes.object.isRequired
   }
 
   static propTypes = {
@@ -29,7 +29,7 @@ class Switch extends React.Component {
 
   render() {
     const { children } = this.props
-    const location = this.props.location || this.context.history.location
+    const location = this.props.location || this.context.route.location
 
     let match, child
     React.Children.forEach(children, element => {
@@ -39,7 +39,7 @@ class Switch extends React.Component {
       }
     })
 
-    return match ? React.cloneElement(child, { computedMatch: match }) : null
+    return match ? React.cloneElement(child, { location, computedMatch: match }) : null
   }
 }
 

packages/react-router/modules/__tests__/Route-test.js

@@ -37,7 +37,7 @@ describe('A <Route>', () => {
     expect(node.innerHTML).toNotContain(TEXT)
   })
 
-  it('can use a `location` prop instead of `context.history.location`', () => {
+  it('can use a `location` prop instead of `context.route.location`', () => {
     const TEXT = 'tamarind chutney'
     const node = document.createElement('div')
 
@@ -125,7 +125,21 @@ describe('A <Route>', () => {
     expect(node.innerHTML).toContain(TEXT)
   })
 
+  it('matches using nextContext when updating', () => {
+    const node = document.createElement('div')
 
+    let push
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/sushi/california' ]}>
+        <Route path="/sushi/:roll" render={({ history, match }) => {
+          push = history.push
+          return <div>{match.url}</div>
+        }}/>
+      </MemoryRouter>
+    ), node)
+    push('/sushi/spicy-tuna')
+    expect(node.innerHTML).toContain('/sushi/spicy-tuna')
+  })
 })
 
 describe('<Route> render props', () => {
@@ -243,3 +257,72 @@ describe('A <Route exact strict>', () => {
     expect(node.innerHTML).toNotContain(TEXT)
   })
 })
+
+describe('A <Route location>', () => {
+  it('can use a `location` prop instead of `router.location`', () => {
+    const TEXT = 'tamarind chutney'
+    const node = document.createElement('div')
+
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/mint' ]}>
+        <Route
+          location={{ pathname: '/tamarind' }}
+          path="/tamarind"
+          render={() => (
+            <h1>{TEXT}</h1>
+          )}
+        />
+      </MemoryRouter>
+    ), node)
+
+    expect(node.innerHTML).toContain(TEXT)
+  })
+
+  describe('children', () => {
+    it('uses parent\'s prop location', () => {
+      const TEXT = 'cheddar pretzel'
+      const node = document.createElement('div')
+
+      ReactDOM.render((
+        <MemoryRouter initialEntries={[ '/popcorn' ]}>
+          <Route
+            location={{ pathname: '/pretzels/cheddar' }}
+            path="/pretzels"
+            render={() => (
+              <Route path='/pretzels/cheddar' render={() => (
+                <h1>{TEXT}</h1>
+              )} />
+            )}
+          />
+        </MemoryRouter>
+      ), node)
+
+      expect(node.innerHTML).toContain(TEXT)
+    })
+    
+    it('continues to use parent\'s prop location after navigation', () => {
+      const TEXT = 'cheddar pretzel'
+      const node = document.createElement('div')
+      let push
+      ReactDOM.render((
+        <MemoryRouter initialEntries={[ '/popcorn' ]}>
+          <Route
+            location={{ pathname: '/pretzels/cheddar' }}
+            path="/pretzels"
+            render={({ history }) => {
+              push = history.push
+              return (
+                <Route path='/pretzels/cheddar' render={() => (
+                <h1>{TEXT}</h1>
+              )} />
+              )
+            }}
+          />
+        </MemoryRouter>
+      ), node)
+      expect(node.innerHTML).toContain(TEXT)
+      push('/chips')
+      expect(node.innerHTML).toContain(TEXT)
+    })
+  })
+})

packages/react-router/modules/__tests__/Router-test.js

@@ -93,6 +93,7 @@ describe('A <Router>', () => {
       expect(rootContext.route.match.url).toEqual('/')
       expect(rootContext.route.match.params).toEqual({})
       expect(rootContext.route.match.isExact).toEqual(true)
+      expect(rootContext.route.location).toEqual(history.location)
     })
 
     it('updates context.route upon navigation', () => {