How to remove the hash from the url in react-router

by

Did you try the browserHistory option ? You will be able also to refresh the page from the browser or specify a url of one of existing routes and land on the right page.

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

ReactDOM.render((
 <Router history={browserHistory}>
    <Route path="https://stackoverflow.com/" component={MasterPage}>
      <IndexRoute component={LoginPage} />
      <Route path="/search" component={SearchPage} />
      <Route path="/login" component={LoginPage} />
      <Route path="/payment" component={PaymentPage} />
    </Route>
  </Router>),
    document.getElementById('app-container'));

Moreover hashHistory is not for production use considering the react-router github doc.

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory

Should I use hashHistory?

Hash history works without configuring your server, so if you’re just
getting started, go ahead and use it. But, we don’t recommend using it
in production, every web app should aspire to use browserHistory

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-dom v6 useNavigate passing value to another component
  8. React Router v4 – How to get current route?
  9. Detect Route Change with react-router
  10. Why do I get the error “expressions must have one parent element”, how do I fix this?
  11. What is the best way to redirect a page using React Router? [closed]
  12. React Router Pass Param to Component
  13. How to stop /#/ in browser with react-router?
  14. You should not use outside a
  15. react router v4 default page(not found page)
  16. react-router-dom useParams() inside class component
  17. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  18. How do you programmatically update query params in react-router?
  19. Invariant failed: You should not use outside a
  20. Nested Routes not rendering with React Router v4
  21. React Router Dom v6 shows active for index as well as other subroutes
  22. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  23. React router, pass data when navigating programmatically?
  24. react routing is able to handle different url path but tomcat returns 404 not available resources
  25. Page layout broken in React Router v6
  26. react router v6 No routes matched location
  27. React router and this.props.children – how to pass state to this.props.children
  28. using NavLink with external URL
  29. Children won’t render when using a layout in ReactJS
  30. React Router Navigate pathing

Leave a Comment