Multi-tenancy and multitenant <Link to .. />

[sharadshahihw]

Hi,

We are trying to build a multi-tenancy app. We decided not to use the basename and go with route with parameters.

return createBrowserRouter([
        {
            children: [
                {
                    element: <SomePage/>,
                    index: true,                  
                },                
            path: '/:tenantId',
        },
    ]);

The issue with this is we will have to interpolate tenantId in to prop of all Link components.

const {tenantId} = useParams();
<Link to=`${tenantId}/otherpage`>Other Page</Link>

Other way would be to make utility component that wraps it.

Are there any other ways to modify Link to so that we don't repeat the interpolation.

[brophdawg11]

One option would be to use relative links to inherit the current tenant: <Link to="otherpage">