How to correctly scatter internal routes among components in React-Router-Dom v6?

Question

React

There is routing at the top level with internal routings, the question arose of adding routings inside components such as ProductsPage, ElementsPage, etc.

<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>

The question is how to do this in version 6. Because before version five it was possible to throw a switch into the component a la ProductsPage without any problems and specify routes in the switch

Answer 1

The documentation has an example with a nested UI (conditional `layout`, inside which the component is rendered - at the place where `Outlet` is), and simply with nested routes, then you do not need to specify element in the parent component.
It is also possible to nest one Routes within another: Example
Section on nested routes in the tutorial