Повторные маршруты с помощью React Router v4

E. Shcherbo спросил: 28 марта 2018 в 03:49 в: reactjs

Является хорошим способом повторить маршруты во вложенных компонентах?

<App>
   <Route exact path="/" render={props =>
      <Layout>
         <Route exact path="/" component={ComponentUnderLayout} />
         <Route exact path="/path1" component={ComponentUnderLayout2} /> 
      </Layout>
   } />
   <Route path="/signin" component={ComponentWithoutLayout} />
</App>

Я не уверен, что это лучшее решение. Как вы можете видеть, я собираюсь обернуть все компоненты моего приложения, кроме некоторых из них. Я хочу отображать Layout и Header для всех путей, кроме / signin и /signup.

Могут ли быть лучшие решения?

1 ответ

Tomasz Mularczyk ответил: 28 марта 2018 в 05:49

Ваш код беспокоит несколько вещей: 1. Render - это функция:

<Route exact path="/" render={props =>
   <Layout>
      <Route exact path="/" component={ComponentUnderLayout} />
      <Route exact path="/path1" component={ComponentUnderLayout2} /> 
   </Layout>
} />

2. ComponentUnderLayout2 никогда не будет визуализирован:

<Route exact path="/" render={props =>
   {/* you have declared that this will get render ONLY when URL is exactly ` "/" which means "/path1" will never get to this place */}
   <Layout>
      <Route exact path="/" component={ComponentUnderLayout} />
      <Route exact path="/path1" component={ComponentUnderLayout2} /> 
   </Layout>
} />

Так что если вы исправите вышеприведенное, вы получите:

<App>
   <Route exact path="/" render={(props) => 
      <Layout>
         <ComponentUnderLayout {...props} />
      </Layout>
   } />
   <Route path="/path1" render={props => 
      <Layout>
         <ComponentUnderLayout2 {...props} />
      </Layout>
   } /> 
   <Route path="/signin" component={ComponentWithoutLayout} />
</App>
EDIT:
<App>
   <Layout>
     <Route exact path="/" component={ComponentUnderLayout} />
     <Route exact path="/path1" component={ComponentUnderLayout2} />
   </Layout>
   <Route exact path="/signin" component={ComponentWithoutLayout} />
</App>
E. Shcherbo ответил: 28 марта 2018 в 05:36
Спасибо за ваш ответ! Я понимаю, что вы имеете в виду, но в этом случае мне приходится дублировать много кода. Я пытаюсь отобразить Header и Layout для всех путей, кроме / signin и / signup .
Tomasz Mularczyk ответил: 28 марта 2018 в 05:49
Разве вы не можете сделать что-то, как в редактировании?
E. Shcherbo ответил: 28 марта 2018 в 06:16
Я думаю, что макет отображается выше ComponentWithoutLayout в этом случае.