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

Есть роутинг на верхнем уровне со внутренними роутингами, встал вопрос добавить роутинги внутри таких компонентов как 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 и в свитче указать роуты
  • Вопрос задан
  • 782 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Black_and_green
Developer - chigrin.xyz
В документации есть пример и с вложенным UI (условный `layout`, внутри которого рендериться компонент - на том месте, где `Outlet`), и просто с вложенными роутами, тогда в родительском компоненте не нужно указывать element.

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

Раздел про вложенные роуты в туториале
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы