How can React-Router-Dom v6 properly distribute internal routers among components?

Question

There is routing at the top level with internal routing, the question arose to add routing 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, you could easily throw a switch into a component a la ProductsPage and specify routes in the switch

Answer 1

You can name all pages explicitly.

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