how to upload react project on github with routing?

Viewed 47

how can i upload my React Project to GitHub with proper routing. When I upload to GitHub then I am testing that it properly working or not. then it is not working. I Don't know why this happened that Routing is not support on git hub pages. Please any one help me, Can I upload my React project on Github with Routing or any other source where i can upload my React Project online and share that project Link?

2 Answers

Per the create-react-app docs:

You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.

Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.

To be honest, better to just use Netlify.

You can deploy your site with a GitHub repo or directly with:

npm run build

and then upload the build folder. Or if you really want to use GitHub, you can use Github to deploy through Netlify. And about routing - routing is very easy in Netlify. If your using react-router-dom that listen up: in your public folder add a _redirects file and add in:

/*   /index.html   200

and then in your src folder add a file called netlify.toml and add:

[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Related