Рендеринг условного рендеринга маршрута. Реагировать на роутер (hashrouter)
Я использую компонент Hashrouter в React Router для визуализации различных маршрутов в приложении React. Чтобы избежать дублирования кода, я создал несколько компонентов под названием TopBar и Footer, поскольку название предполагает, что он отображает эти два элемента на веб-сайте. Моя проблема возникает, когда я хочу добавить еще один маршрут для страницы администратора, который я НЕ ХОЧУ, чтобы ни TopBar, ни Footer не были. Поскольку путь совпадает с '/', очевидно, что показаны оба компонента вместе с компонентом AdminFrame.
У меня есть пара обходных решений, но я хотел бы знать, есть ли какое-нибудь простое и простое решение этой проблемы без изменения какого-либо маршрута в этой структуре:
<HashRouter>
<div>
<Route path = "/" render = {()=> (
<TopBar/>
)} />
<Route exact path = "/" render = {() => (
<Home />
)} />
<Route exact path = "/contacto" render = {() => (
<Contact />
)} />
<Route path = "/" render = {()=> (
<Footer/>
)} />
<Route path = "/admin" render = {()=> (
<AdminFrame/>
)} />
</div>
</HashRouter>
Любая помощь приветствуется.
Ответы 1
Если верхняя панель и нижний колонтитул отображаются только на домашней странице, вы можете вместо этого просто разместить верхнюю панель и нижний колонтитул где-нибудь в компоненте «Главная». Если вам все еще нужны верхняя панель и нижний колонтитул, я бы выбрал Switch, чтобы лучше организовать маршруты:
<HashRouter>
<div>
<Route exact path = "/" render = {()=> (
<TopBar/>
)} />
<Route exact path = "/" render = {()=> (
<Footer/>
)} />
<Switch>
<Route path = "/contacto" render = {() => (
<Contact />
)} />
<Route path = "/admin" render = {()=> (
<AdminFrame/>
)} />
<Route path = "/" render = {() => (
<Home />
)} />
</Switch>
</div>
</HashRouter>
Switch отображает только первый совпадающий маршрут.
Потрясающе, я рад слышать: D
Спасибо, Шон, я наконец изменил подход. размещение TopBar и Footer в каждом необходимом компоненте.