Upgrading React-Router and replacing hashHistory with browserHistory

Question

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 advice. 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:

• it showed a grey screen
• the HTML of the app had only the <noscript data-reactid=".0"></noscript> tag inside it
• the React Developer Tools showed me that the router had a null inside it
• I also checked the Network tab and all files were downloaded properly, and had the right content

• surprisingly the was nothing printed in the JavaScript Console, no error/no warnging (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 Router.jsx:

   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((
  -    <Router history={History}>
  +    <Router history={browserHistory}>
           {Routes}
       </Router>
   ), document.getElementById('smartadmin-root'));`
  

The backend uses the Phoenix Framework.

Later Edit: Here you have the hashHistory version that works

https://gitlab.com/blockbuster/react-router-2-with-hash-working/tree/master

And here is the browserHistory version that doesn't:

https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working/tree/master

The react code for both can be found under the src directory.

To run the app you need to have Elixir, Phoenix and Postgresql installed, to get backend dependencies( run $ mix deps.get), get frontend dependecies( npm install and bower install), to change the database username and password in config/dev.exs, to create and migrate the database mix ecto.create && mix ecto.migrate and finally run mix phoenix.server.

Answer 1

Have you tried it this way in your Router.jsx?

import React from 'react'
import {render} from 'react-dom'
import { Router, Route, Link, browserHistory, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

import History from '../components/layout/navigation/classes/History.js';

import Routes from './Routes.jsx';

const appHistory = useRouterHistory(createBrowserHistory)({ queryKey: false })

var rootInstance = render((
    <Router history={appHistory}>
        {Routes}
    </Router>
), document.getElementById('smartadmin-root'));

Answer 2

Since there is no solution yet, find my (minimalistic) router version below, that is working for me.

Dependencies:

• react@15.1.0
• react-dom@15.1.0
• react-router@2.4.0

History.js is not needed explicitly, since it is a dependency of react-router.

Webpack Make sure to add

devServer: {
    historyApiFallback: true
}

to your webpack.config.js, since webpack-dev-server might have some issues routing correctly (mostly in terms of backwards navigation).

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute, browserHistory} from 'react-router';

import {Routes} from './Routes'; // your routes file

render(
    <Router history={browserHistory}>
        {Routes}
    </Router>,
    document.querySelector('#smartadmin-root')
);

I would encourage you to try this code and leave out your hotloading stuff. Let me know if it helps and if there are any questions. I'm glad to edit my post as needed.