title: react-router mounts the wrong component
body: <p>I'm writing a React-on-Rails (v. 5) app and am running into an issue. When I visit the path <code>accounts/:account_id/letters/new</code>, React-Router is mounting the <code>EmailShowComponent</code>, when I want it to mount the <code>EmailSendComponent</code>.</p>
  
  <p>This is my app.js file:</p>
  
  <pre><code>&lt;Router history={browserHistory}&gt;
    &lt;Route path="/accounts/:id" component={AccountShowContainer} /&gt;
    &lt;Route path="/accounts/:account_id/letters/:id" component={EmailShowComponent} /&gt;
    &lt;Route path="/accounts/:account_id/letters/new" component={EmailSendComponent} /&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>This is my main.js file:</p>
  
  <pre><code>import 'babel-polyfill';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  
  $(function(){
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById('app')
    )
  });
  </code></pre>
  
  <p>And I've placed <code>"&lt;div id="app"&gt;"</code> tags inside each of the relevant html pages that generate those paths for the router.</p>
  
  <p>Any idea what could be causing this?</p>