title: React-Router v4 adding sub routes
body: <p>Big noob with <code>react-router</code> v4 and React in general. I'm trying to set up two parent routes: <code>/</code> and <code>/dashboard</code>. <code>/</code> will be the landing page to login/signup/etc and /dashboard will be the authenticated area. I'm having a bit of trouble getting the subroutes working following the docs and this SO answer <a href="https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4">here</a></p>
  
  <p>It's pretty simple set-up. Here's my <code>app.js</code> (routes <code>/</code> and <code>/dashboard</code> work fine): </p>
  
  <pre><code>import React from 'react'
  import {Route, BrowserRouter, Switch} from 'react-router-dom'
  import LandingPage from "./components/landing/LandingPage";
  import ETFApp from "./components/dashboard/ETFApp";
  
  class App extends React.Component {
      render() {
          return (
              &lt;BrowserRouter&gt;
                  &lt;Switch&gt;
                      &lt;Route path="/" exact component={LandingPage}/&gt;
                      &lt;Route path="/dashboard" component={ETFApp}/&gt;
                  &lt;/Switch&gt;
              &lt;/BrowserRouter&gt;
          )
      }
  }
  
  export default App;
  </code></pre>
  
  <p>But my <code>LandingPage</code> component has sub routes that don't seem to work, particularly <code>/signup</code> and <code>/login</code>. I have a hunch I'm doing something wrong.:</p>
  
  <pre><code>import React, {PropTypes} from 'react';
  import {Link, Route} from 'react-router-dom';
  import {ToolbarGroup, ToolbarTitle, RaisedButton, Toolbar} from 'material-ui'
  import HomeCard from "./HomeCard";
  import LoginPage from "../../containers/LoginPage";
  import SignUpPage from "../../containers/SignUpPage";
  
  
  const LandingPage = ({match}) =&gt; {
      return (
          &lt;div&gt;
              &lt;Toolbar&gt;
                  &lt;ToolbarGroup&gt;
                      &lt;Link to="/"&gt;
                          &lt;ToolbarTitle text="ETFly"/&gt;
                      &lt;/Link&gt;
                  &lt;/ToolbarGroup&gt;
                  &lt;ToolbarGroup&gt;
                      &lt;RaisedButton label="Login" primary={true} containerElement={&lt;Link to="/login"&gt;Log in&lt;/Link&gt;}/&gt;
                      &lt;RaisedButton label="Sign up" primary={true} containerElement={&lt;Link to="/signup"&gt;Sign up&lt;/Link&gt;}/&gt;
                  &lt;/ToolbarGroup&gt;
              &lt;/Toolbar&gt;
              &lt;Route path={match.url} exact component={HomeCard}/&gt;
              &lt;Route path={`${match.url}/login`} component={LoginPage}/&gt;
              &lt;Route path={`${match.url}/signup`} component={SignUpPage}/&gt;
          &lt;/div&gt;
      );
  };
  
  LandingPage.propTypes = {
      match: PropTypes.object.isRequired
  }
  
  export default LandingPage;
  </code></pre>
  
  <p>EDIT: I've removed the switch in my <code>LandingPage</code> component as it is similar to the docs <a href="https://reacttraining.com/react-router/web/example/basic" rel="nofollow noreferrer">here</a> but still no good. I'm also no longer using the <code>match</code> prop:</p>
  
  <pre><code>&lt;Route path="/" component={HomeCard}/&gt;
  &lt;Route path="/login" component={LoginPage}/&gt;
  &lt;Route path="/signup" component={SignUpPage}/&gt;
  </code></pre>
  
  <p>It looks like the component isn't being rendered in React Dev Tools:</p>
  
  <p><a href="https://i.stack.imgur.com/Q5P89.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q5P89.png" alt="React Dev Tools"></a></p>
  
  <p>Any help appreciated. Thanks.</p>