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

by

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

More Related Contents:

  1. How to push to History in React Router v4?
  2. How to pass params with history.push/Link/Redirect in react-router v4?
  3. How to get history on react-router v4?
  4. Detecting user leaving page with react-router
  5. How to pass params into link using React router v6?
  6. React router changes url but not view
  7. React Router v4 – How to get current route?
  8. Detect Route Change with react-router
  9. Why do I get the error “expressions must have one parent element”, how do I fix this?
  10. What is the best way to redirect a page using React Router? [closed]
  11. React Router Pass Param to Component
  12. react-router-dom useParams() inside class component
  13. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  14. What is withRouter for in react-router-dom?
  15. How do you programmatically update query params in react-router?
  16. Invariant failed: You should not use outside a
  17. Using React-Router with a layout page or multiple components per page
  18. Target Active Link when the route is active in Next.js
  19. Use history.push in action creator with react-router-v4?
  20. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  21. Page layout broken in React Router v6
  22. react router v6 No routes matched location
  23. Pass object through Link in react router
  24. Automatic redirect after login with react-router
  25. React router and this.props.children – how to pass state to this.props.children
  26. using NavLink with external URL
  27. Children won’t render when using a layout in ReactJS
  28. How to go back to previous route in react-router-dom v6
  29. React Router Navigate pathing
  30. How to remove the hash from the url in react-router

Leave a Comment