Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 2
Message 1 of 5

My react project doesn't work on github pages

Solved! Go to Solution.

Hi guys! I am trying to publish my first little react project on github pages but I am facing difficulties. Only the stuff that is directly on route "/" can be accessed. All other routes do not work. My research implies that the reason is that I am using BrowserRouter, which does the routing on client side. I have tried something with a _config.yml (see docs folder) file but it made no difference. This is perhaps something useful I've found on stackoverflow... But I have no idea how to implement this on github pages: https://stackoverflow.com/questions/41772411/react-routing-works-in-local-machine-but-not-heroku?nor... This is my repo: https://github.com/bastian-ger/tiny-book-reviewer  Thanks for your help!!

4 Replies
Copilot Lvl 2
Message 2 of 5

Re: My react project doesn't work on github pages

Thanks for reading this. As nobody could help me with this, I deployed it to Heroku.

Highlighted
Ground Controller Lvl 1
Message 3 of 5

Re: My react project doesn't work on github pages

Even I have the same problem. But When I deployed my application in Heroku I am getting a blank page. Could you please tell me step by step procedure you followed when deploying your application to Heroku.

 

Solution
Pilot Lvl 2
Message 4 of 5

Re: My react project doesn't work on github pages

Hi @bastian-ger!

 

It looks like you went ahead and deployed your react site to heroku, but I just wanted to follow up and let you know what was going on.

 

React apps work a little differently than normal GitHub Pages sites, so there are special directions within the "Create React App" documentation on how to publish them:

 

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#g...

 

That documentation will walk you through how to deploy a React app to GitHub Pages, and there's also information on that page under the heading "Notes on client-side routing" that explains the technical reason you were experiencing a routing issue. They also offer some potential solutions, so if you'd prefer to deploy to GitHub Pages rather than Heroku, you may be still be able to do so.

 

Copilot Lvl 2
Message 5 of 5

Re: My react project doesn't work on github pages

use base name prop in the <BrowseRouter> and set the base name to the subdirectory name.

 

eg:If the subdirectory name in your server is folder1,

 

<BrowserRouter basename="folder1">

<Route exact path="/"  component={Exchange>

</BrowserRouter>