title: react-router - separate files
body: <p>So I have the following <code>app.js</code></p>
  
  <pre><code>import React from 'react'
  import { render } from 'react-dom'
  import { BrowserRouter, Match, Miss, Link } from 'react-router'
  
  //import Jobs from './modules/Jobs'
  //import Job from './modules/Job'
  
  const App = () =&gt; (
    &lt;BrowserRouter&gt;
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;Link to="/"&gt;Main&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to="/jobs"&gt;Jobs&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;hr/&gt;
  
        &lt;Match exactly pattern="/" component={Main} /&gt;
        &lt;Match pattern="/jobs" component={Jobs} /&gt;
      &lt;/div&gt;
    &lt;/BrowserRouter&gt;
  )
  
  
  const Jobs = ({ pathname }) =&gt; (
    &lt;div&gt;
      &lt;h2&gt;Jobs&lt;/h2&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;Link to={`${pathname}/job1`}&gt;job1&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to={`${pathname}/job2`}&gt;job2&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to={`${pathname}/job3`}&gt;job3&lt;/Link&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;Match pattern={`${pathname}/:jobId`} component={Job}/&gt;
      &lt;Match pattern={pathname} exactly render={() =&gt; (
        &lt;h3&gt;Please select a job&lt;/h3&gt;
      )}/&gt;
    &lt;/div&gt;
  )
  
  render(&lt;App/&gt;, document.querySelector('#root'))
  </code></pre>
  
  <p>It works great.</p>
  
  <p>How can I put this bit in a separate file?</p>
  
  <pre><code>const Jobs = ({ pathname }) =&gt; (
    &lt;div&gt;
      &lt;h2&gt;Jobs&lt;/h2&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;Link to={`${pathname}/job1`}&gt;job1&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to={`${pathname}/job2`}&gt;job2&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to={`${pathname}/job3`}&gt;job3&lt;/Link&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;Match pattern={`${pathname}/:jobId`} component={Job}/&gt;
      &lt;Match pattern={pathname} exactly render={() =&gt; (
        &lt;h3&gt;Please select a job&lt;/h3&gt;
      )}/&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>I would like a folder called <code>modules</code> like so:</p>
  
  <ul>
  <li><p>modules</p>
  
  <ul>
  <li><p>Main.js</p></li>
  <li><p>Jobs.js</p></li>
  <li><p>Job.js</p></li>
  <li><p>etc.</p></li>
  </ul></li>
  </ul>
  
  <p>I used to do this kind of thing:</p>
  
  <pre><code>//Jobs.js
  import React from 'react'
  
  export default React.createClass({
    render() {
      return (
        &lt;div&gt;
          &lt;h2&gt;Jobs&lt;/h2&gt;
        &lt;/div&gt;
      )
    }
  })
  </code></pre>
  
  <p>and then I'd include it in my <code>app.js</code> with: <code>import Jobs from './modules/Jobs'</code></p>
  
  <p>But as I'm new to React, I'm not sure of the syntax...</p>