title: How can I split React Router into multiple files
body: <p>My routes file is getting rather messy so I decided to split them out into separate files. </p>
  
  <p>My problem is that if I used 2 separate files, whichever comes after the first include does not get rendered:</p>
  
  <pre><code>const routes = (
    &lt;div&gt;
      &lt;Switch&gt;
        &lt;Route exact path="/" component={Home} /&gt;
        {Registration} //Does get rendered
  
        //Everything below this does not get a route
        {Faq}
        &lt;Route path="/login" component={login} /&gt;
        &lt;Route component={NoMatch} /&gt;
      &lt;/Switch&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>If I switch <code>Faq</code> with <code>registration</code> then all the Faq routes will work.</p>
  
  <p><strong>RegistrationRoutes.js</strong></p>
  
  <pre><code>import Introduction from '../containers/Registration/Introduction';
  import Login from '../containers/Login';
  
  const Routes = (
    &lt;Switch&gt;
      &lt;Route path="/login" component={Login} key="login" /&gt;,
      &lt;Route path="/registration/introduction" component={Introduction} key="registration-intro" /&gt;
    &lt;/Switch&gt;
  );
  export default Routes;
  </code></pre>
  
  <p><strong>FaqRoutes.js</strong></p>
  
  <pre><code>import Faq from '../containers/Faq';
  import faqJson from '../json_content/faq/faq';
  import FaqCategory from '../containers/Faq/faqCategory';
  
  const Routes = (
    &lt;Switch&gt;
      &lt;Route path="/faq/:category" component={FaqCategory} key="faqCat" /&gt;
      &lt;Route path="/faq" render={props =&gt; &lt;Faq data={faqJson} /&gt;} key="faq" /&gt;
    &lt;/Switch&gt;
  );
  export default Routes;
  </code></pre>