How to stop /#/ in browser with react-router?

Question

Any way to prevent /#/ from showing in the browser's address bar when using react-router? That's with ReactJS. i.e. Clicking on links to go to a new route shows localhost:3000/#/ or localhost:3000/#/about. Depending on the route.

Answer 1

For the versions 1, 2 and 3 of react-router, the correct way to set the route to URL mapping scheme is by passing a history implementation into the history parameter of <Router>. From the histories documentation:

In a nutshell, a history knows how to listen to the browser's address bar for changes and parses the URL into a location object that the router can use to match routes and render the correct set of components.

Versions 2 and 3

In react-router 2 and 3, your route configuration code will look something like this:

import { browserHistory } from 'react-router' ReactDOM.render ((   <Router history={browserHistory} >    ...  </Router>  ), document.body); 

Version 1

In version 1.x, you will instead use the following:

import createBrowserHistory from 'history/lib/createBrowserHistory' ReactDOM.render ((    <Router history={createBrowserHistory()} >    ...   </Router>  ), document.body); 

Source: Version 2.0 Upgrade Guide

Version 4

For the upcoming version 4 of react-router, the syntax has changed a great deal and it is required is to use BrowserRouter as the router root tag.

import BrowserRouter from 'react-router/BrowserRouter' ReactDOM.render ((    <BrowserRouter>    ...  <BrowserRouter>  ), document.body); 

Source React Router Version 4 Docs