React Router not working with Github Pages

by

  1. If deploying to GitHub, ensure there is a "homepage" entry for where you are hosting it in Github.

    Example:

     "homepage": "https://github.com/amodhakal/portfolio",

  2. Switch to the HashRouter since GitHub pages doesn’t support the tech used by the BrowserRouter.

    index

     import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HashRouter } from 'react-router-dom'
 import App from './App';
 import './styles/index.css';

 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <HashRouter>
       <App />
     </HashRouter>
   </React.StrictMode>
 );

For more details see the create-react-app docs for deploying to GitHub Pages and notes on client-side routing.

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  5. How to pass params into link using React router v6?
  6. react-router-dom v6 useNavigate passing value to another component
  7. Detect Route Change with react-router
  8. Simple Conditional Routing in Reactjs
  9. React router v6 how to use `navigate` redirection in axios interceptor
  10. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  11. Invariant failed: You should not use outside a
  12. useNavigate() may be used only in the context of a component
  13. React Router Dom v6 shows active for index as well as other subroutes
  14. What is the alternative for Redirect in react-router-dom v 6.0.0?
  15. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  16. How to use Private route in react-router-dom@v6
  17. Difference in the navigation (React Router v6)
  18. ‘withRouter’ is not exported from ‘react-router-dom’
  19. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  20. react app showing empty page when redirecting on production build
  21. React App goes blank after importing React-Router-Dom
  22. How to use environment variables in Github Page?
  23. React Router 4 Nested Routes not rendering
  24. You cannot render a inside another . You should never have more than one in your app
  25. Children won’t render when using a layout in ReactJS
  26. How to go back to previous route in react-router-dom v6
  27. React Router V6 – Error: useRoutes() may be used only in the context of a component
  28. react native post form data with object and file in it using axios
  29. Next Image not taking class properties
  30. How to remove the hash from the url in react-router

Leave a Comment