commented up the modal demo, reformatted a bit for small screen readability

Author: ryanflorence

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

@@ -6,6 +6,61 @@ import {
   Link
 } from 'react-router-dom'
 
+// This example shows how to render two different screens
+// (or the same screen in a different context) at the same url,
+// depending on you got there.
+//
+// Click the colors and see them full screen, then "visit the
+// gallery" and click on the colors. Note the URL and the component
+// are the same as before but now we see them inside a modal
+// on top of the old screen.
+
+class ModalSwitch extends React.Component {
+
+  // We can pass a location to <Switch/> that will tell it to
+  // ignore the router's current location and use the location
+  // prop instead.
+  //
+  // We can also use "location state" to tell the app the user
+  // wants to go to `/images/2` in a modal, rather than as the
+  // main page, keeping the gallery visible behind it.
+  //
+  // Normally, `/images/2` wouldn't match the gallery at `/`.
+  // So, to get both screens to render, we can save the old
+  // location and pass it to Switch, so it will think the location
+  // is still `/` even though its `/images/2`.
+  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 // not initial render
+    )
+    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 IMAGES = [
   { id: 0, title: 'Dark Orchid', color: 'DarkOrchid' },
@@ -16,10 +71,18 @@ const IMAGES = [
 ]
 
 const Thumbnail = ({ color }) =>
-  <div style={{ width: 50, height: 50, background: color }}></div>
+  <div style={{
+    width: 50,
+    height: 50,
+    background: color
+  }}/>
 
 const Image = ({ color }) =>
-  <div style={{ width: '100%', height: 400, background: color }}></div>
+  <div style={{
+    width: '100%',
+    height: 400,
+    background: color
+  }}></div>
 
 const Home = () => (
   <div>
@@ -34,17 +97,19 @@ const Home = () => (
 
 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>
-      ))
-    }
+    {IMAGES.map(i => (
+      <Link
+        key={i.id}
+        to={{
+          pathname: `/img/${i.id}`,
+          // this is the trick!
+          state: { modal: true }
+        }}
+      >
+        <Thumbnail color={i.color} />
+        <p>{i.title}</p>
+      </Link>
+    ))}
   </div>
 )
 
@@ -102,41 +167,6 @@ const Modal = ({ match, history }) => {
   )
 }
 
-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} />