404 when trying to enter a react app route

by

If your application is working for all the routes when you navigate using <Link> and history.push but throwing 404 Not Found when you type a URL other than http://example.com, say http://example.com/articles, directly in your browser, you need to:

Teach your server to handle 404s by redirecting to the
index.html page.

You can do this in one of the following ways:

  1. Add a custom 404 page which redirects you to index.html.
  2. If your hosting solution, c-panel, provides an error page setting for the deployment, provide index.html as the error page.
  3. Use HashRouter from react-router. Check HashRouter Solution and What’s HashRouter.

Also, check notes-on-client-side-routing and How to deploy on cPanel.

More Related Contents:

  1. How to push to History in React Router v4?
  2. React : difference between and
  3. How to pass params with history.push/Link/Redirect in react-router v4?
  4. React Router v4 renders multiple routes
  5. How to get history on react-router v4?
  6. How to pass params into link using React router v6?
  7. react router difference between component and render
  8. React Router v4 – How to get current route?
  9. Detect Route Change with react-router
  10. You should not use outside a
  11. Simple Conditional Routing in Reactjs
  12. How do I pass state through React_router?
  13. react router v4 default page(not found page)
  14. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  15. Invariant failed: You should not use outside a
  16. Nested Routes not rendering with React Router v4
  17. React Router Dom v6 shows active for index as well as other subroutes
  18. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  19. React router, pass data when navigating programmatically?
  20. react routing is able to handle different url path but tomcat returns 404 not available resources
  21. react router v6 No routes matched location
  22. React Router 4 Nested Routes not rendering
  23. React router 4 does not update view on link, but does on refresh
  24. React: Hide a Component on a specific Route
  25. React router and this.props.children – how to pass state to this.props.children
  26. using NavLink with external URL
  27. Children won’t render when using a layout in ReactJS
  28. How to go back to previous route in react-router-dom v6
  29. React Router Navigate pathing
  30. How to remove the hash from the url in react-router

Leave a Comment