微前端的动态 React 路由问题

Question

我正在使用 React 和 vite 创建微前端。我无法完成我想要的路线。

'/' // host-app homepage
'/some-tenant' // remote-app TenantPage
'/some-tenant/some-subscription' // remote-app SubscriptionPage

运行主机应用程序时，我导航到

/some-tenant

，什么也没有出现。当我导航到

/some-tenant/some-sub

时，TenantPage 会加载。

/tenant/sub/test

加载订阅页面。

我尝试了一些方法来让它工作，但棘手的部分是我想在独立运行远程应用程序时使用相同的路由。有什么想法如何实现两者？这是重现问题的存储库。 https://github.com/lestersconyers/react-routes/

摘录供参考

// host-app 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 />} />
        <Route path=":tenant" element={< RemoteRootApp />} />
        <Route path=":tenant/*" element={< RemoteRootApp />} />
      </Routes>
    </React.Suspense>
  </div>
  )
}

// remote-app App.tsx
function App() {

  return (
    <div className="app">
      <Routes>
        <Route path=":tenant" element={<TenantPage />} />
        <Route path=":tenant/:subscription" element={< SubscriptionPage />} />
        <Route path=":tenant/:subscription/manage" element={< ManageSubscriptionPage />} />
      </Routes>
    </div>
  )
}

// remote-app main.tsx
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
  <BrowserRouter >
    <App />
  </BrowserRouter>
</React.StrictMode>,
)

Answer 1

问题

如果“远程应用程序”在“主应用程序”的

"/:tenant/*"

路由路径上呈现，则其所有子路由都将构建 relative 到此父路由路径。问题是“远程应用程序”有一个额外的“重叠”/“重复”“租户”路径段，它混淆了您期望匹配的内容。

您现在拥有的，以及标记的匹配路线：

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