[SOLVED] Getting 404 Not found when reloading my React app

Getting 404 Not found when reloading my React app

I am trying to deploy a react application in Zoho Catalyst using Catalyst Web Client Hosting. When I tested the application in local machine, everything works fine. So I deployed the same to the development enviornment using the below command

catalyst deploy

When I tried testing the app using the app URL, everything seems to be working fine until I reload a route path "/app/path1" where I am getting 404 Not found error. The same route works fine when I load the path for the first time. Can someone help me resolve this?

Solution

You might be getting this behaviour if you are using Browser Router in your react app. You can try using different routers such as Hash Router instead of the Browser Router. You can check if Hash Routing works by changing the URL path from "/app/path1" to "/app/#/path1".

If the app works fine even after reloading the page then you can replace the Browser Router to Hash Router. You can find a sample code snippet for Hash Router below:

import { HashRouter, Routes, Route, Navigate } from "react-router-dom";
import Path1 from "./path1";
import Path2 from "./path2";

function App() {
return (
 <HashRouter>
   <Routes>
     <Route path="/path1" element={<Path1 />} />
     <Route path="/path2" element={<Path2 />} />
     <Route path="*" element={<Navigate to="/" replace />} />
   </Routes>
 </HashRouter>
);
}

You can find the official help documentation for Hash Router here.