Визуализация маршрута условного рендеринга.Реактивный роутер (hashrouter) - PullRequest
Новая
       11

Визуализация маршрута условного рендеринга.Реактивный роутер (hashrouter)

0 голосов
/ 23 ноября 2018

Я использую компонент 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 Ответ

0 голосов
/ 23 ноября 2018

Если верхняя панель и нижний колонтитул отображаются только на главной странице, вы можете вместо этого поместить TopBar и нижний колонтитул в компонент Home.Если вам все еще нужны верхняя панель и нижний колонтитул, я бы использовал коммутатор, чтобы лучше организовать маршруты: 

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

Коммутатор отображает только первый соответствующий маршрут.

...