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

by

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

More Related Contents:

  1. React Router: Cannot read property ‘pathname’ of undefined
  2. react-router scroll to top on every transition
  3. Detect Route Change with react-router
  4. Alternate way for optional parameters in v6
  5. How to get query parameters in react-router v4
  6. Can I set a base route in react-router
  7. How do I add an active class to a Link from React Router?
  8. Forcing a React-Router to load a page, even if we’re already on that page
  9. How to sync Redux state and url hash tag params
  10. Refresh previous screen on goBack()
  11. Deploying react-redux app in AWS S3
  12. is there a way to set a default route with React-Router v6
  13. Nested Routes in React Router v4
  14. How to test components using new react router hooks?
  15. How to Access History Object Outside of a React Component
  16. Using Jest to test a Link from react-router v4
  17. What is a state in component of React Router?
  18. isActive style in react-router v.6
  19. React Router work on reload, but not when clicking on a link
  20. React Router with optional path parameter
  21. Detecting user leaving page with react-router
  22. React router changes url but not view
  23. ReactJS – Lifting state up vs keeping a local state
  24. npm start error with create-react-app
  25. Why do I get the error “expressions must have one parent element”, how do I fix this?
  26. Multiple Nested Routes in react-router-dom v4
  27. How to manually invoke Link in React-router?
  28. How to use normal anchor links with react-router
  29. create-react-app is not working since version 4.0.1
  30. ‘React’ was used before it was defined

Leave a Comment