react routing is able to handle different url path but tomcat returns 404 not available resources

by

First, you must be aware of the following differences when using react-router.

When you enter localhost:3003/test/ in your browser, it will request the server, and then it will receive /test/index.html, the js bundle, css, …

After that, whenever you click an internal link (eg. localhost:3003/test/t/), your browser will not request the server again. React-router will resolve this client-side, re-render portions of the page, and update browser’s address bar (using HTML5 pushstate()), without triggering another server request.

When you enter localhost:3003/test/t/ directly in the address bar, your browser will request the server, and Tomcat does not have /test/t/index.html or so, and it returns a 404. It’s because Tomcat doesn’t know anything about react-redux nor javascript.

A way to handle this is to configure 404 errors to be forward to /test/index.html. It’s probably how your webpack dev server is configured by default.

There is plenty of examples of doing this on apache, if you have one in front of our Tomcat.
Search for html5 pushstate apache config.

Here is an example:

httpd.conf:

...
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>
...

If you are using Tomcat alone, you may try to specify this in the web.xml, inside your .war file:

...
<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>
...

Note that this is not a react-router specific problem, every app that uses HTML5 pushstate() needs to handle this somehow. Javascript servers may handle this more seamlessly though.

More Related Contents:

  1. Programmatically navigate using React router
  2. How to get parameter value from query string?
  3. How to create a protected route?
  4. React-router-v6 access a url parameter
  5. Component does not remount when route parameters change
  6. React.createElement: type is invalid — expected a string
  7. Programmatically navigating in React-Router v4
  8. react-router-dom v6 useNavigate passing value to another component
  9. What is the best way to redirect a page using React Router? [closed]
  10. React Router Pass Param to Component
  11. 404 when trying to enter a react app route
  12. How to stop /#/ in browser with react-router?
  13. react-router-dom useParams() inside class component
  14. What is withRouter for in react-router-dom?
  15. How do you programmatically update query params in react-router?
  16. react-router vs react-router-dom, when to use one or the other?
  17. Using React-Router with a layout page or multiple components per page
  18. Target Active Link when the route is active in Next.js
  19. Use history.push in action creator with react-router-v4?
  20. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  21. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  22. react app showing empty page when redirecting on production build
  23. React App goes blank after importing React-Router-Dom
  24. Pass object through Link in react router
  25. Automatic redirect after login with react-router
  26. How to nest routes in React Router v4?
  27. React Router v4 with multiple layouts
  28. Passing values through React-Router v4
  29. React Router work on reload, but not when clicking on a link
  30. React Router V6 – Error: useRoutes() may be used only in the context of a component

Leave a Comment