title: Upgrading React-Router and replacing hashHistory with browserHistory
body: <p>I have a bootstrap+react theme that was using react-router 1.x and hashHistory and I wanted to remove the hash so followed this <a href="https://stackoverflow.com/questions/25086832/how-to-stop-in-browser-with-react-router">advice</a>. 
  Initially I tried to do this while having the 1.x version and I was unable to do it so I've decided to upgrade react-router to 2.x.
  After installing react-router 2.x the app worked because it was still using hashHistory but when I replaced it with browserHistory:</p>
  
  <ul>
  <li>it showed a grey screen</li>
  <li>the HTML of the app had only the <code>&lt;noscript data-reactid=".0"&gt;&lt;/noscript&gt;</code> tag inside it</li>
  <li>the React Developer Tools showed me that the router had a <code>null</code> inside it</li>
  <li>I also checked the Network tab and all files were downloaded properly, and had the right content</li>
  <li><p><strong>surprisingly the was nothing printed in the JavaScript Console, no error/no warnging</strong> (I'm really shocked about this, but I'm new React, I would like to know what to do in situations like this).
  Here are my changes to <code>Router.jsx</code>:</p>
  
  <pre><code> import React from 'react'
   import {render} from 'react-dom'
  -import {Router} from 'react-router'
  +// import {Router} from 'react-router'
  +import { Router, Route, Link, browserHistory } from 'react-router'
  +// import { useRouterHistory } from 'react-router'
  +// import { createHashHistory } from 'history'
  +// import { createBrowserHistory } from 'history'`
  
   import History from '../components/layout/navigation/classes/History.js';
  
   import Routes from './Routes.jsx';
  
  +// const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
  +
   var rootInstance = render((
  -    &lt;Router history={History}&gt;
  +    &lt;Router history={browserHistory}&gt;
           {Routes}
       &lt;/Router&gt;
   ), document.getElementById('smartadmin-root'));`
  </code></pre></li>
  </ul>
  
  <p>The backend uses the <a href="http://www.phoenixframework.org/" rel="nofollow noreferrer">Phoenix Framework</a>.</p>
  
  <p><strong>Later Edit</strong>:
  Here you have the <code>hashHistory</code> version that works</p>
  
  <p><a href="https://gitlab.com/blockbuster/react-router-2-with-hash-working-public/tree/master" rel="nofollow noreferrer">https://gitlab.com/blockbuster/react-router-2-with-hash-working/tree/master</a></p>
  
  <p>And here is the <code>browserHistory</code> version that doesn't:</p>
  
  <p><a href="https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working-public/tree/master" rel="nofollow noreferrer">https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working/tree/master</a></p>
  
  <p>The react code for both can be found under the <code>src</code> directory.</p>
  
  <p>To run the app you need to have <code>Elixir</code>, <code>Phoenix</code> and Postgresql installed, to get backend dependencies( run <code>$ mix deps.get</code>), get frontend dependecies( <code>npm install</code> and <code>bower install</code>), to change the database username and password in <code>config/dev.exs</code>, to create and migrate the database <code>mix ecto.create &amp;&amp; mix ecto.migrate</code> and finally run <code>mix phoenix.server</code>.</p>