title: How do I make a responsive master-detail layout with react-router v4 as described in 'philosophy'
body: <p>I am trying to make a responsive Master/Detail layout using react-router v4 as described <a href="https://reacttraining.com/react-router/core/guides/philosophy/responsive-routes" rel="nofollow noreferrer">here</a>.  The code it suggests is</p>
  
  <pre><code>const App = () =&gt; (
      &lt;AppLayout&gt;
      &lt;Route path="/invoices" component={Invoices}/&gt;
      &lt;/AppLayout&gt;
  )
  
  const Invoices = () =&gt; (
      &lt;Layout&gt;
  
      {/* always show the nav */}
      &lt;InvoicesNav/&gt;
  
      &lt;Media query={PRETTY_SMALL}&gt;
          {screenIsSmall =&gt; screenIsSmall
          // small screen has no redirect
          ? &lt;Switch&gt;
              &lt;Route exact path="/invoices/dashboard" component={Dashboard}/&gt;
              &lt;Route path="/invoices/:id" component={Invoice}/&gt;
              &lt;/Switch&gt;
          // large screen does!
          : &lt;Switch&gt;
              &lt;Route exact path="/invoices/dashboard" component={Dashboard}/&gt;
              &lt;Route path="/invoices/:id" component={Invoice}/&gt;
              &lt;Redirect from="/invoices" to="/invoices/dashboard"/&gt;
              &lt;/Switch&gt;
          }
      &lt;/Media&gt;
      &lt;/Layout&gt;
  )
  </code></pre>
  
  <p>However I am unable to get something working based on this.  There are a few things that I am not sure about:</p>
  
  <p>1) What is this AppLayout component?</p>
  
  <p>2) Which Layout component is it referring to and is this important?</p>
  
  <p>3) I am assuming the Media tag refers to react-media?</p>
  
  <p>4) Media query={PRETTY_SMALL} means something along the lines of Media query={{ maxWidth: 599 }}</p>
  
  <p>5) There is no Router component anywhere, which I though was needed</p>
  
  <p>6) There are no Link objects anywhere</p>
  
  <p>The best I have come up with so far (on a project started with create-react-app) is</p>
  
  <pre><code>import Media from "react-media";
  import React, { Component } from 'react';
  import { Route, Switch, Redirect } from 'react-router-dom';
  
  const data = [
      {
          id: 1,
          to: 'Mr. Smith',
          amount: 10
      },
      {
          id: 2,
          to: 'Mrs. Jones',
          amount: 100
      }
  ]
  
  const InvoicesNav = () =&gt; (
      &lt;div&gt;
          Nav Bar
      &lt;/div&gt;
  )
  
  const Dashboard = () =&gt; (
      &lt;div&gt;
          Dashboard
      &lt;/div&gt;
  )
  
  const Invoice = () =&gt; (
      &lt;div&gt;
          Invoice
      &lt;/div&gt;
  )
  
  const App = () =&gt; (
      // &lt;AppLayout&gt;
      &lt;Route path="/invoices" component={Invoices} /&gt;
      // &lt;/AppLayout&gt;
  )
  
  const Invoices = () =&gt; (
      // &lt;Layout&gt;
      &lt;div&gt;
  
          {/* always show the nav */}
          &lt;InvoicesNav /&gt;
  
          &lt;Media query={{ maxWidth: 599 }}&gt;
              {screenIsSmall =&gt; screenIsSmall
                  // small screen has no redirect
                  ? &lt;Switch&gt;
                      &lt;Route exact path="/invoices/dashboard" component={Dashboard} /&gt;
                      &lt;Route path="/invoices/:id" component={Invoice} /&gt;
                  &lt;/Switch&gt;
                  // large screen does!
                  : &lt;Switch&gt;
                      &lt;Route exact path="/invoices/dashboard" component={Dashboard} /&gt;
                      &lt;Route path="/invoices/:id" component={Invoice} /&gt;
                      &lt;Redirect from="/invoices" to="/invoices/dashboard" /&gt;
                  &lt;/Switch&gt;
              }
          &lt;/Media&gt;
          {/* &lt;/Layout&gt; */}
      &lt;/div&gt;
  )
  
  export default App;
  </code></pre>
  
  <p>But this still doesn't really do anything that resembles a responsive Master/Detail layout and neither does anything in the samples for react-router as far as I can see. :(</p>