Typescript 在单独的组件中定义React Router路由

The Problem:个

我们有一个应用程序，它定义了它自己的路由和组件(例如Home、About Us等)，但也消费了一个名为Basket的内部NPM包.

问题是篮子组件有多个steps(例如，用户详细信息、支付等)，我们计划使用Reaction路由V6来处理每个步骤之间的导航.

在阅读了文档并浏览了Stack之后，标准方法是:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/basket">
      <Route path="/user-details" element={<PaymentDetails />} />
    </Route>
  </Routes>
</BrowserRouter>

问题是我们不能这样定义它，因为篮子要在多个应用程序中使用，维护它应该像做npm install package@latest个一样简单.

Questions:个

由于以下内容不起作用并导致此错误，我们如何实现这一点？

[Basket] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>个

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Basket countryCode="GB" />    
  </Routes>
</BrowserRouter>

export const Basket = ({
  countryCode,
}: BasketProps) => (
  // Attempted the following line as a Route and Fragment with both resulting in the attached error
  <Route path="/basket">
    <Route
      path="/mobile-capture"
      element={<UserDetails countryCode={countryCode} />}
    />
    // ... All other components
  </Route>
);

Sidenote:

我能做到这一点的唯一方法是使用下面的方法，但由于几个原因(即使用多个<Routes />在任何地方都没有文档记录)，它感觉不正确.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
  <Routes>
    <Basket countryCode="GB" />    
  </Routes>
</BrowserRouter>

export const Basket = ({
  countryCode,
}: BasketProps) => (
  <Routes>
    <Route
      path="/user-details-capture"
      element={<UserDetails countryCode={countryCode} />}
    />
    // ... All other components
  </Routes>
);