Проблема

Если «удаленное приложение» отображается на пути маршрута "/:tenant/*" «основного приложения», то все его подмаршруты будут построены относительно этого родительского пути маршрута. Проблема в том, что «удаленное приложение» имеет дополнительный «перекрывающийся»/«дублирующий» сегмент пути «арендатора», который смешивает то, что вы ожидаете сопоставить.

Что у вас есть прямо сейчас, с отмеченными совпадающими маршрутами:

хост-приложение App.tsx

const RemoteRootApp = lazy(() => import('remoteApp/RemoteRootApp') as any);

function App() {
  return (
    <div className = "app">
      <React.Suspense fallback = "Loading">
        <Routes>
          <Route path = "/" element = {<HomePage />} />

          {/* Matches
            *   - "/some-tenant/some-sub"
            *   - "/tenant/sub/test"
            *   - "/some-tenant"
            */}
          <Route path = "/:tenant/*" element = {<RemoteRootApp />} />
        </Routes>
      </React.Suspense>
    </div>
  );
}

удаленное приложение App.tsx

function App() {
  return (
    <div className = "app">
      <Routes>
        {/* Nothing matches "/some-tenant" */}

        <Route
          // "/:tenant/:tenant" matches "/some-tenant/some-sub"
          path = ":tenant"
          element = {<TenantPage />}
        />
        <Route
          // "/:tenant/:tenant/:subscription" matches "/tenant/sub/test"
          path = ":tenant/:subscription"
          element = {<SubscriptionPage />}
        />
        <Route
          path = ":tenant/:subscription/manage"
          element = {<ManageSubscriptionPage />}
        />
      </Routes>
    </div>
  );
}

Решение

В своем «удаленном приложении» вы хотите исключить ведущий «дубликат» tenant сегмент пути.

удаленное приложение App.tsx

function App() {
  return (
    <div className = "app">
      <Routes>
        {/* Nothing matches "/tenant/sub/test" */}

        <Route
          // "/:tenant" matches "/some-tenant"
          path = "/"
          element = {<TenantPage />}
        />
        <Route
          // "/:tenant/:subscription" matches "/some-tenant/some-sub"
          path = "/:subscription"
          element = {<SubscriptionPage />}
        />
        <Route
          path = "/:subscription/manage"
          element = {<ManageSubscriptionPage />}
        />
      </Routes>
    </div>
  );
}

Когда «удаленное приложение» запускается отдельно, вы можете предоставить сегмент корневого tenant пути маршрутизатору через свойство basename, и все маршруты/ссылки/и т. д. будут функционировать относительно этого пути.

import { BrowserRouter } from 'react-rotuer-dom';

...

<BrowserRouter basename = "/some-tenant">
  {/* Remote App */}
  <RootApp />
</BrowserRouter>