Как лучше всего реализовать вложенные маршруты с независимыми страницами в React?
У меня довольно простая настройка маршрутизации в React (TypeScript). У меня есть Header и Footer, которые я всегда хочу отображать. Домашний компонент, который отображает содержимое моей главной страницы. Часть, которая меня немного беспокоит, — это раздел проектов. У меня есть отдельная страница под названием «Проекты», на которой отображаются проекты, над которыми я работал. Находясь на странице проектов, я хотел бы щелкнуть по реальным проектам и перейти на соответствующие сайты, как показано в кодовом блоке ниже. Приведенный ниже код работает, но кажется неправильным. Я попробовал вложить его так, чтобы оно выглядело как image2:
Когда я добавляю <Outlet/> к своему компоненту ProjectsPage, он обязательно отображает дочерние маршруты. Однако он также отображает родительскую страницу. В идеале я хочу, чтобы они отображались независимо. Я надеюсь в этом есть смысл.
Блок кода 1 — Вложенные маршруты:
<Router>
<Header />
<Routes>
<Route path = "/" element = {<Home />} />
<Route path = "/projects" element = {<ProjectsPage />}>
<Route path = "portfolio" element = {<PortfolioProject />} />
<Route path = "realestateapp" element = {<RealEstateProject />} />
</Route>
<Route path = "*" element = {<NoPage />} />
</Routes>
<Footer />
</Router>
Блок кода 2 — Невложенные маршруты:
<Router>
<Header />
<Routes>
<Route path = "/" element = {<Home />} />
<Route path = "/projects" element = {<ProjectsPage />} />
<Route path = "/projects/portfolio" element = {<PortfolioProject />} />
<Route path = "/projects/realestateapp" element = {<RealEstateProject />} />
<Route path = "*" element = {<NoPage />} />
</Routes>
<Footer />
</Router>
Ответы 1
Ваш пример «code1» отличается от «code 2», поскольку он отображает ProjectsPage как маршрут макета. Если вы хотите, чтобы два примера кода были эквивалентны, вам следует визуализировать ProjectsPage как индексный маршрут под маршрутом макета "/projects".
Пример:
<Router>
<Header />
<Routes>
<Route path = "/" element = {<Home />} />
<Route path = "/projects">
<Route index element = {<ProjectsPage />}>
<Route path = "portfolio" element = {<PortfolioProject />} />
<Route path = "realestateapp" element = {<RealEstateProject />} />
</Route>
<Route path = "*" element = {<NoPage />} />
</Routes>
<Footer />
</Router>
<Router>
<Header />
<Routes>
<Route path = "/" element = {<Home />} />
<Route path = "/projects" element = {<ProjectsPage />} />
<Route path = "/projects/portfolio" element = {<PortfolioProject />} />
<Route path = "/projects/realestateapp" element = {<RealEstateProject />} />
<Route path = "*" element = {<NoPage />} />
</Routes>
<Footer />
</Router>
@AnilFerhatCeran Если вы хотите вложить маршруты, то да, это правильный способ сделать это. В противном случае любая реализация будет работать хорошо, они эквивалентны.
Обновление моего примера вложенного кода до того, что вы предложили, было именно тем, что мне нужно. Будет ли это правильным способом установки такого типа? Спасибо!