improve backend redirection

Author: qvalentin

src/components/Router/BackendRedirect.tsx

@@ -0,0 +1,18 @@
+import { useHistory, useLocation } from "react-router-dom";
+
+export default function BackendRedirect() {
+    const location = useLocation();
+    const history = useHistory();
+    const urlSearchParams = new URLSearchParams(location.search);
+    const redirected = urlSearchParams.get("redirected");
+
+    // this param will be visible for the user, even though it is only needed if the fe is not accessed via nginx, but it prevents endless loops
+    if (redirected === "") {
+        history.push("/error404");
+        return null;
+    }
+    urlSearchParams.set("redirected", "");
+    history.push(location.pathname + "?" + urlSearchParams.toString());
+    window.location.reload(); // leave the spa, to access the apis.
+    return null;
+}

src/components/Router/Router.tsx

@@ -7,6 +7,7 @@ import Registration from "../pages/User/Registration";
 import FileSystem, { filesBaseUrl } from "../pages/filesytem/Filesystem";
 import Profile from "../pages/User/Profile";
 import Error400 from "../pages/errors/Error400";
+import BackendRedirect from "./BackendRedirect";
 
 export default function Router(): ReactElement {
     return (
@@ -24,13 +25,7 @@ export default function Router(): ReactElement {
             <Route path={"/profile"} component={Profile} />
             <Route path={"/profile"} component={Profile} />
             <Route path={"/error"} component={Error400} />
-            <Route
-                path={["/data", "/api"]}
-                component={() => {
-                    window.location.reload(); // leave the spa, to access the apis. This could cause a endless loop if the nginx is not present
-                    return null;
-                }}
-            />
+            <Route path={["/data", "/api"]} component={BackendRedirect} />
             <Route path={"*"} component={Error404} />
         </Switch>
     );