title: upgrading react-router from 2.X to 4.x issues
body: <p>The project I was put in had this react web application that seems badly managed (e.g. it looks like npm packages were taken out of node_modules, and called into the web application through another file path, and had all the formatting removed so it is basically unreadable.</p>
  
  <p>Tried my best to work with it as it, but i have an issue with asynchronous (which after time and time of working on, still doesn't work). I think the application as well as this asynchronous issue would benefit if i updated from 2.X to 4.X.
  So i deleted any mention of the old distorted react-router package, and installed a fresh latest copy in node_modules. except it seems vastly different than from before. My existing routes don't work and it also seems and GET/POST requests are also messed up?? (but cant confirm)</p>
  
  <p>this is my original react-router 2.X code:</p>
  
  <pre><code>const { Router, Route, browserHistory,IndexRoute }=ReactRouter;
  //(seems like there are additional references to this in webpack etc that enables it to work)
  
  render(){
      return (
          &lt;div&gt;
              &lt;Router history={browserHistory}&gt;
                  &lt;Route name='home' path={'/'+contextName}&gt;
                      &lt;IndexRoute  component={LandingPage}/&gt;
                      &lt;Route name='templates' path='templates'&gt;
                          &lt;IndexRoute component={JobPage}/&gt;
                          &lt;Route path=':reconDate&amp;:templateId' component={JobDetailPage}/&gt;
                      &lt;/Route&gt;
                  &lt;Route name='report' path='report' component={ReportPanel}/&gt;
              &lt;/Route&gt;
              &lt;Route path='*' component={NotFoundPage}/&gt;
          &lt;/Router&gt;
      &lt;div&gt;
  </code></pre>
  
  <p>and this is what i currently have (react-router 4.X):</p>
  
  <pre><code>import { Router, Route, Switch} from 'react-router';
  
  import createBrowserHistory from 'history/createBrowserHistory'
  
  const customHistory = createBrowserHistory()
  
  render(){
      return (
          &lt;div&gt;
              &lt;Router history={customHistory}&gt;
                  &lt;div&gt;
                      &lt;Route name='home' path={'/'+contextName} component={LandingPage}/&gt;
                      &lt;Switch&gt;
                          &lt;Route name='templates' path={'/'+contextName + 'templates'} component={JobPage}/&gt;
                          &lt;Switch&gt;
                              &lt;Route path={'/'+contextName + 'templates/:reconDate&amp;:templateId'} component={JobDetailPage}/&gt;
                          &lt;/Switch&gt;
                          &lt;Route name='report' path={'/'+contextName + 'report'} component={ReportPanel}/&gt;
                          &lt;Route path='*' component={NotFoundPage}/&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/Router&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone help? this isn't my main issue, but i've been ripping my hair out so much from my main issue, i think it is worth a shot to upgrade react-router and see if it is easier to handle my asynchronous issue (not shown here for simplicity)</p>
  
  <p>so the only paths are:</p>
  
  <pre><code>/compare (contextName = 'compare')
  /compare/templates
  /compare/templates/:reconDate&amp;:templateId
  /compare/report
  </code></pre>
  
  <p>and anything else would give the notFoundPage</p>