Issue

如果"远程应用程序"在"主应用程序"的"/:tenant/*"路由路径上呈现，则其所有子路由将构建101至此父路由路径.问题是"远程应用程序"有一个额外的"重叠"/"重复""租户"路径段，该路径段混淆了您期望匹配的内容.

您现在拥有的内容，以及标记的匹配路由:

主机应用程序.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>
  );
}

Solution

您希望在"远程应用程序"中省略前面的"重复"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>
  );
}

当"远程应用程序"单独运行时，您可以通过basename Prop向路由提供根tenant路径段，并且所有路由/链接/等将相对于this路径起作用.

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

...

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