React app deployment on github pages shows a blank page

Question

I'm just starting with react and I built my first application and now I'm trying to deploy it on github pages but the page is completely blank. The steps I followed are:

1. Install gh-pages: npm install gh-pages --save
2. Add homepage to package.json: "homepage": "https://milind452.github.io/my-reads/"
3. Add scripts: "predeploy": "npm run build", "deploy": "gh-pages -d build"
4. Deploy: npm run deploy

I can see that the gh-pages branch is created and a deployment is also created; but the page is blank and nothing shows on the console. I checked the sources in the dev-tools and all the files are there.

I also checked my repo pages settings and the source for deployment is set to gh-pages branch. I'm not sure what is happening.

I also checked out this stackoverflow question but none of the answers there seemed to solve it for me.

Here is the github repo and the deployment link

Answer 1

Never use BrowserRouter on GitHub Pages. There are some issues with it, it always shows blank screen. Use HashRouter instead, that will most probably work.

import { HashRouter } from "react-router-dom";

// some code here

return (
    <HashRouter base="/">
        <App />
    </HashRouter>
)

Answer 2

The create react app documentation says that:

GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

• 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.

Therefore you should use hashHistory if you want to host your site on GitHub Pages. Here is the link to documentation.

If you don't wish to change router, try deploying it on Netlify which is also another free hosting provider. But again for Netlify deployment, follow the documentation , which says:

To support pushState , make sure to create a public/_redirects file with the following rewrite rules:

/*  /index.html  200