GitHub Community
My react project doesn't work on github pages #21836
-
|
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?noredirect=1&lq=1 This is my repo: https://github.com/bastian-ger/tiny-book-reviewer Thanks for your help!! |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments
-
|
Thanks for reading this. As nobody could help me with this, I deployed it to Heroku. |
Beta Was this translation helpful? Give feedback.
-
|
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: 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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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> |
Beta Was this translation helpful? Give feedback.
-
|
To keep the basename dynamic, you could use the |
Beta Was this translation helpful? Give feedback.
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#github-pages
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 offe…