Reach router - связать вложенные маршруты

Question

У меня есть куча вложенных маршрутов, которые я бы хотел импортировать как ленивый пакет, чтобы не выполнять откат между каждой страницей. Возможно ли это сделать?

Мой маршрутизатор в настоящее время выглядит примерно так:

<Router>
 <GroupOne path="/group1">
   <NestedRouteOne path="/nested1"/>
   <NestedRouteTwo path="/nested2"/>
 </GroupOne>
 <GroupTwo path="/group2">
   <NestedRouteOne path="/nested1"/>
   <NestedRouteTwo path="/nested2"/>
 </GroupTwo>
</Router>

Я пытаюсь выделить вложенные маршруты в их собственный компонент, чтобы их можно было объединить вместе. как

const NestedOne = lazy(() => import("./NestedOne"));
const NestedTwo = lazy(() => import("./NestedTwo"));

<Suspense fallback={<Loader />}>
<Router>
 <GroupOne path="/group1">
   <NestedOne />
 </GroupOne>
 <GroupTwo path="/group2">
   <NestedTwo />
 </GroupTwo>
</Router>
</Suspense>

с этими компонентами, по сути, визуализирующими фрагмент с вложенными маршрутами.

Когда я это делаю, я получаю сообщение об ошибке

browser.js:38 Uncaught Invariant Violation: <Router>: Children of <Router> must have a `path` or `default` prop, or be a `<Redirect>`. None found on element type `[object Object]`