How to stop /#/ in browser with react-router?
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
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
For the current version 0.11 and forward, you need to add Router.HistoryLocation
to Router.run()
. <Routes>
are now deprecated. See the Upgrade Guide for the 0.12.x HistoryLocation implementation.