DEV Community

Cover image for Problem with react-router app and Github Pages (Solved !)

Problem with react-router app and Github Pages (Solved !)

janjibDEV on August 02, 2021

Introduction Everyone must have using the GitHub pages to deploy their React project to the internet. And of course, building a react ap...
Collapse
 
dilinar profile image
Szymon Jergas

I was looking for a solution to this problem.
Unfortunately it does not work and I can't find the problem. I think all the routing in general is correct since it works fine when running locally, but i can't get it to work on gh-pages.
Could You take a look?
github.com/Dilinar/work_management...

Collapse
 
janjibdev profile image
janjibDEV

I guess the problem was solved right. I tried to open your github pages and it works just fine

Collapse
 
dilinar profile image
Szymon Jergas

Hi again!
While the information provided here was useful to fix general routing problems, fixing the 404 error on refreshing a sub-page is a different issue.
Gh-pages does not support single page applications, so a workaround is needed. In order to fix the issue, the project requires a custom 404.html file that contains a redirection script.
In other words, instead of allowing gh-pages to open the default 404 error page, we need to have our own that instead of opening, uses a script that takes the previous address and opens it's again.
At least that's how my junior brain understands it. In any case, I've used the steps described here:
github.com/rafgraph/spa-github-pages

Thread Thread
 
jfar41 profile image
ricocode

This is what helped me

ricocode.com

Thread Thread
 
iamashusahoo profile image
Ashutosh

i was not able to understand what it does. tried following the tutorial but not understanding. Is there any tutorial or video?

Collapse
 
dilinar profile image
Szymon Jergas

Oh, I've forgotten to link the deployment.
dilinar.github.io/work_management_...

While it does load the home page properly and going to any subpage via the buttons works, trying to refresh any of the subpages results in a 404 error. Also, going back to the home page loads the error page.

Collapse
 
aee_hrishya profile image
Hrishikesh Shinde

I just simply wrapped all my routes inside the HashRouter instead of BrowserRouter and it works fine

Collapse
 
janjibdev profile image
janjibDEV

Yeah, your method is the simplest one actually. However, it doesn't work with my program so that is why I figure out other ways

Collapse
 
moiseshp profile image
Moisés Huaringa

In this moment, this solution, react router v6 is not working :(

Collapse
 
janjibdev profile image
janjibDEV

I just tried this method by using react router v6 and its still working. Maybe you should recheck your codes that involve react router v6

Collapse
 
codewithchirag14 profile image
Chirag Nankani

Hi ,
I think i made all possible changes but still my react routing application isn't working on github, Could anyone please help me to solve this issue?

Link to my git repository: github.com/CodeWithChirag14/QuickN...

Link to my react application: codewithchirag14.github.io/QuickNe...

Collapse
 
netmagik profile image
Irina Blumenfeld

Thanks for the post. It helped me figure out the links for my app on gh-pages and I got it to work

Collapse
 
klamda profile image
Krishna Kumar

Hey, event after changing the app name and changing the routes, the gh page is still not routing perfectlly

Collapse
 
janjibdev profile image
janjibDEV • Edited

How can we communicate ? I have applied this practice and it always worked. Maybe you can share your code ?

Collapse
 
tchassi_jordan profile image
Tchassi Jordan

Thanks, it has resolved my problem

Collapse
 
catherineisonline profile image
Ekaterine Mitagvaria

Could you get back to this article and update it, please? Your current repository is not displaying and this solution needs an update

Collapse
 
yethranayeh profile image
Alper Aktaş

Thank you! After prepending the routes with project's repo name it worked.

Collapse
 
ibrahemnaser profile image
ibrahemnaser • Edited

Thank you,
Your post saved me alot.
It works now
ibrahemnaser.github.io/Furnite/

Collapse
 
humamchoudhary profile image
humamchoudhary

I am still having this issue even after adding a 404.html and the fix above