getting 404 for links with create-react-app deployed to github pages

Question

I'm trying to deploy a create-react-app to a relative path on GitHub pages with a custom domain. E.g. www.example.com/myproject

I'm using react-router-dom, react-router-redux and react-router-bootstrap

I've set homepage to http://www.example.com/myproject in packages.json (tried homepage = "." too) and also configured basename for my history:

...
export const history = createHistory({ basename: '/myproject' });
const middleware = [thunk, routerMiddleware(history)];
...
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);

The deployed app works on www.mydomain.com/myproject and I can navigate via the app links.

But I got 404 when I try to enter a path directly (eg. www.example.com/myproject/account) or if I do browser refresh on a subpage.

Long term goal is to configure different relative paths for dev and prod environments as described in this answer but first I just need to make it work in deployment.

Thoughtless

u need a server side script to handle the routing for you, example respond to all endpoints with the same index.html – Renz

Answer 1

Problem: URL gets evaluated on server side

When you enter a new URL into address bar of the browser or refreshes the page, browser requests server (in this case GitHub pages server) for that URL. At this point, client side router (react-router) can't take action as it is not yet loaded for that page. Now server looks for a route that matches /accounts won't find it (because routing is done on client side) and returns 404.

Solution

If you had control over the server, you can serve index.html for all routes. This is explained in create react app documentation serving apps with client side routing. As we don't have that control in case of GitHub pages, We can try these.

Easy Solution

Switch from browserHistory to hashHistory With this change, your URLs will go from looking like

www.example.com/myproject/account

to

www.example.com/myproject/#/account

So it's a bit messy.

Harder solution

Get GitHub pages to redirect to index.html on all requests. Basically you have to add a 404.html in your build directory with code to redirect to index.html. More on how to do that.

Create React App has documentation around client-side routing in GitHub pages too

Kisor

thank you. I finally went to a route to deploy to netlify instead. With netlify I just had to add a _redirects file into the root folder , no hacking :) – Thoughtless

@Thoughtless Can you change the question title to something like `getting 404 on hitting routes in GitHub pages or something? It could help people with similar problem to find this easily. – Kisor

This link has some nice suggestions link. The one that worked for me was using HashHistory. – Delbert

Thanks. By just using HashRouter instead of BrowserRouter my problem solved and now every URL are accessible from outside. reacttraining.com/react-router/web/api/HashRouter – Rocker

Thanks. By just replacing BrowserRouter with HashRouter fixed my issue. – Brandon

it worked, but when i do refresh webpage then again getting same 404 error, or <a href> also not working – Brigandine

Hi! My index.js file doesn't have code for a Router. Would you please tell me how to add one? Or is that not possible any longer? – Unthrone

After using HashRouter instead of browserRouter why it returning ' # ' in url – Bronchopneumonia

Answer 2

The best way to solve the issue is create a copy of index.html and call it 404.html for production build. To make it add this to package.json scripts:

"build": "react-scripts build && cp build/index.html build/404.html"

Lisalisabet

But when reloading a page (e.g. "/blog"), the app shows the main ("/") again instead of ("/blog"). – Enlarger

Something is wrong with your router – Lisalisabet

This solution works but whenever you refresh, you get an annoying "This page seems to be missing" message from your browser, even if the page is properly rendered – Eolian

Answer 3

The reason is because the browser may not have cached the routing code yet so it causes a 404 error if you go to a route other than the index.

Side note if anyone is using ZEIT Now to deploy (although gh-pages would be similar); I managed (after a deal of time) to work out how to fix it. It was a bit of an effort so I decided to make an article on it for anyone else who gets stuck.

https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb

Jellaba

i follwed your article and thats what happened -> 'now' is not recognized as an internal or external command, operable program or batch file. error Command failed with exit code 1. – Marta

Answer 4

Since you don't have control over the server to serve index.html from all routes, one option is to use a tool like react-snap. It takes your React app and renders each route to individual .html files, which you can then publish to GitHub Pages. The individual .html files still include the React app as part of them, so once pages are loaded, React routing takes over as normal.

Poundage

Answer 5

Instead of Redirections, the better solution is to use https://www.npmjs.com/package/react-snap.

React Snap Auto generates the pages and is better because it does not uses any redirection.

Galer