What is the difference between HashRouter and BrowserRouter in React?

by

BrowserRouter

It uses history API, i.e. it’s unavailable for legacy browsers (IE 9 and lower and contemporaries). Client-side React application is able to maintain clean routes like example.com/react/route but needs to be backed by web server. Usually this means that web server should be configured for single-page application, i.e. same index.html is served for /react/route path or any other route on server side. On client side, window.location.pathname is parsed by React router. React router renders a component that it was configured to render for /react/route.

Additionally, the setup may involve server-side rendering, index.html may contain rendered components or data that are specific to current route.

HashRouter

It uses URL hash, it puts no limitations on supported browsers or web server. Server-side routing is independent from client-side routing.

Backward-compatible single-page application can use it as example.com/#/react/route. The setup cannot be backed up by server-side rendering because it’s / path that is served on server side, #/react/route URL hash cannot be read from server side. On client side, window.location.hash is parsed by React router. React router renders a component that it was configured to render for /react/route, similarly to BrowserRouter.

Most importantly, HashRouter use cases aren’t limited to SPA. A website may have legacy or search engine-friendly server-side routing, while React application may be a widget that maintains its state in URL like example.com/server/side/route#/react/route. Some page that contains React application is served on server side for /server/side/route, then on client side React router renders a component that it was configured to render for /react/route, similarly to previous scenario.

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. How to push to History in React Router v4?
  3. How to get history on react-router v4?
  4. How to pass params into link using React router v6?
  5. How to display svg icons(.svg files) in UI using React Component?
  6. Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
  7. Detect Route Change with react-router
  8. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  9. How to access files uploaded to the public folder in Next.js?
  10. How to scroll to bottom in react?
  11. Differences between creating a new class to using export const
  12. React Child Component Not Updating After Parent State Change
  13. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  14. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  15. How to create helper file full of functions in react native?
  16. Invariant failed: You should not use outside a
  17. draftjs how to initiate an editor with content
  18. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  19. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  20. Recommended approach for route-based tests within routes of react-router
  21. NextJs CORS issue
  22. How to use Private route in react-router-dom@v6
  23. Difference in the navigation (React Router v6)
  24. React Hooks – Modified state not reflecting immediately
  25. What is the best way to trigger change or input event in react js from jQuery or plain JavaScript
  26. react router v6 No routes matched location
  27. ESLint Must use destructuring state assignment
  28. create react app not picking up .env files?
  29. React Hook useEffect has a missing dependency: ‘list’
  30. Show/Hide components in ReactJS

Leave a Comment