Remove hash in a React App served by BrowserSync

You probably noticed that by default react app navigation is using the famous /#/ in the url.

But what if you want to have “proper” urls like domain.com/foo/bar instead of domain.com/#/foo/bar?

The React part

Inside your React app you will need to make a simple change. Change the history argument for your <Router> from hashHistory to browserHistory

import { Router, browserHistory } from 'react-router';

ReactDOM.render ((
 <Router history={browserHistory} />
   ...
 </Router>
), document.body);

The BrowserSync part

Now the other part is to make your BrowserSync server (gulp task here) able to serve these urls. To do so, just add some middleware in your config:

const historyApiFallback = require('connect-history-api-fallback');

...

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: './',
            middleware: [historyApiFallback()]
        },
        notify: false
    });
});

And then you should be able to access to domain.com/foo/bar

This post is based on 2 stackoverflow posts: