React Router with Github Pages 💎

If you have tried to deploy a React App with react-router-dom to github pages, probably you'll hate yourself because it won't work as you expected 😔.

So what the heck is going on ? why is this happening?

So if you don't know gh-pages deploy your React App
to this url http://{username}.github.io/{repo-name}
and in your App the "/" route means this url http://{username}.github.io/.

So one solution for this

is to replace the BrowserRouter with HashRouter
so instead of this

do this

Now deploy again your changes with
npm run deploy

Thats it

Comments

[mahmod258]

is hashRouter valid for version 6 of react router dom

[Mohamed Amine Fh]

Yes it is check it out reactrouter.com/docs/en/v6/api#has...