Как в React-Router-Dom v6 правильно раскидать по компонентам внутренние роуты?

Question

[Вика Мармеладка]

Есть роутинг на верхнем уровне со внутренними роутингами, встал вопрос добавить роутинги внутри таких компонентов как ProductsPage, ElementsPage и т.д.

<BrowserRouter>
                    <Routes>
                        <Route path='/' element={<PageLayout />}>
                            <Route path='marketplace'>
                                <Route path='products' element={<ProductsPage />} />
                                <Route path='constituents' element={<ElementsPage />} />
                                <Route path='resources' element={<ResourcesPage />} />
                                <Route path='shopping' element={<ShoppingPage />} />
                            </Route>
                            <Route path='resource-center'>
                                <Route path='planner' element={<>планирование</>} />
                                <Route path='resources' element={<>resources</>} />
                            </Route>
                            <Route path='*' element={<>Страница не найдена 404</>} />
                        </Route>
                    </Routes>
                </BrowserRouter>

Вопрос, как это сделать в версии 6. Потому что до версии пять можно было без проблем кинуть свитч в компонент а-ля ProductsPage и в свитче указать роуты

Comments

[Ice]

<Route path='products' element={<ProductsPage />} >
   <Route path='...' element={...} />
</Route>

Почему не завернуть как верхний уровень?

<Route path=":id" element={...} />
Для динамических параметров

Answer 1

[Mark Chigrin]

В документации есть пример и с вложенным UI (условный `layout`, внутри которого рендериться компонент - на том месте, где `Outlet`), и просто с вложенными роутами, тогда в родительском компоненте не нужно указывать element.

Также можно вкладывать один Routes в другой: Пример

Раздел про вложенные роуты в туториале