React-router app deployed on dynamic subdirectory. Manual navigation using the <Navigate to={} /> doesn't work

[hakunamatata97k]

Hello there :)

I'm using React-Router-Dom and Vite on my project.
The app will be deployed onto a dynamic subdirectory that is not known pre-deployment.

Thus, using the solution found here: I set the base name of the router to match whatever the value of the /generatedsubdirectory.

The in-app routing is triggered by the user via UI buttons in the app.

Per example:

• Current example.com/generatedsubdirectory/view → Button click → URL changes to example.com/generatedsubdirectory/secondview and <MobileElement /> is displayed. The same applies from /secondview → /view.

The Problem:

In App navigation as shown in the above example works, BUT When the user manually navigates to /secondview by tying the /secondview in the browser URL field, the router doesn't return anything!

Basically any route that involve: <Navigate to={Constants.AppRoutes.ROUTE_XYZ} /> doesn't support manual navigation!.

The code:

Here is the code:

.env

VITE_BASE_PATH = /

router.tsx:

export const AppRoutes = () => [
    { path: Constants.AppRoutes.ROOT_PATH, element: <Navigate to={Constants.AppRoutes.ROUTE_A} /> },
    {
        path: Constants.AppRoutes.Route_A,
        element: <AppLayout />,
    },
    {
        path: Constants.AppRoutes.ROUTE_B,
        element: <MobileElement />,
    },
    {
        // -> *
        path: Constants.AppRoutes.WILD_CARD_PATH,
        element: <h1>This route: {window.location.pathname} does not exists.</h1>,
    },
];

Constants.ts:

AppRoutes: {
    ROOT_PATH: '/',
    ROUTE_A: '/view',
    ROUTE_B: '/secondview',
    RELATIVE_PATH: window.location.pathname.replace(/(\/[^/]*)$/, ''),
    WILD_CARD_PATH: '*',
}

App.ts

function App(): JSX.Element {
    const appRoutes = AppRoutes();
    const appRouter = createBrowserRouter(
        createRoutesFromElements(
            <>
                {appRoutes.map((route) => (
                    <Route index key={route.path} path={route.path} element={route.element} />
                ))}
            </>,
        ),
        {
            basename: Constants.AppRoutes.RELATIVE_PATH,
            future: {
                v7_normalizeFormMethod: true,
                v7_relativeSplatPath: true,
            },
        },
    );
    return <RouterProvider router={appRouter} />;
}

I have read the documentation of the React-Router but haven't found a solution yet.