`basename` issues

I can’t seem to get the basename property on navigation to work. I assume it serves the exact same purpose as react router’s basename.

Redirects and links seem to ignore it. Here is my main <App /> component:

function App() {
    const dispatch = useDispatch();
    const { profile } = useReduxState('user');
    const { fieldTypes } = useReduxState('app');

    useEffect(() => {
        dispatch(gapiInit());
    }, [dispatch]);

    return (
        <Router
            routes={routes}
            basename={BASEPATH}
            context={{ profile, fieldTypes }}
        >
            <MainLayout>
                <Suspense fallback={null}>
                    <View />
                </Suspense>
            </MainLayout>
            <Message />
            <ConfirmationDialogue />
        </Router>
    );
}

My main routes file

const routes = mount({
    '*': map((request, context) =>
        !context.profile || !context.fieldTypes
            ? redirect(
                  '/login?redirectTo=' +
                      encodeURIComponent(request.originalUrl),
                  { exact: false }
              )
            : map(() => {
                  store.dispatch(setConfirmRouteChange(false));
                  store.dispatch(setConfirmationDialogue(null));
                  return pageRoutes;
              })
    ),
    // Catches the root URL before login to avoid adding 'redirectTo' by default
    '/': map((request, context) =>
        !context.profile || !context.fieldTypes
            ? redirect('/login')
            : pageRoutes
    ),
    '/login': map(async (request, context) =>
        !context.profile || !context.fieldTypes
            ? route({
                  title: 'Login',
                  view: <LoginPage />
              })
            : redirect(
                  request.params.redirectTo
                ? decodeURIComponent(request.params.redirectTo)
                      : '/'
              )
    )
});

BASEPATH is set to /dist/. Navigating to localhost:8080/dist redirects me to localhost:8080/login.

Any help would be greatly appreciated 🙏

[jamesknelson]

The basename option is a little different in Navi to react-router – it does affect routing, but doesn’t effect links/redirects. This allows basename to be used to integrate Navi with react-router and other routers, but also means that you’ll need to pass the full path for links/redirects.

One way to do this would be to add basename to the routing context and add it into redirects manually.

[OnkelTem]

Hmm, adding the basename to context is a solution for routing

Not in our case I’m afraid. We have dozens of components and, with a minor exception, they’re all written with the router-agnostic thought in mind. To give them Navi context woud mean editing all of them and making them more navi-dependent either by calling useCurrentRoute() from inside of the components or by wrapping all the components into a custom withRouter() hoc to get the context basename passed in props.