How to redirect old route to new route with React Router 6 ?

[ccreusat]

Hi guys!

I will try to explain my problem clearly.

Problem

We are refactoring an app in React with React Router 6.
The old app was in AngularJS and the routing for the old app wasn't great and had routes like : appName#/view/:id

For the new app, we have something like this appName/id/:id
Why not appName/:id? .. Well because of backend and technical debts... Apps are served through Nginx and backend route is appName/:id (no version api...). I fetch appName/:id and not something like /api/v1/...

Currently navigating to appName#/view/:id falls to my path / (so the root of my react app).

Question

How do I redirect to the correct route appName/id/:id` ?

• Is it possible with loaders?
• Or do I need to do it in some Parent component with UseEffect and navigate ?

Local vs Production

ℹ️ In production build, my basename is replaced with the current app name

export const router = createBrowserRouter(routes, {
  basename: import.meta.env.PROD ? "/appName" : "/",
});

So in local environment, it's working great.

Here some things I tried :

with loader under path "/" or even tried in path "*"

loader: async () => {
      const hash = window.location.hash;

      let newPath = "";

      if (hash.startsWith("#/view/")) {
        const id = hash.replace("#/view/", "");
        newPath = `id/${id}`;
        return redirect(newPath);
      }
      return "/";
    }

with useEffect and navigate

const navigate = useNavigate();

  useEffect(() => {
    const hash = window.location.hash;

    let newPath = "";

    if (hash.startsWith("#/view/")) {
      const id = hash.replace("#/view/", "");
      newPath = `id/${id}`;
      navigate(newPath, { replace: true });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

If that's supposed to work, it doesn't.. Don't know if this is something with Nginx (I am aware of issues with RR6 + Nginx).. Right now, backend serves the index.html in backend route where necessary (not great right...)

Hope someone can help 🙏🏼