Вложенные переключатели с братьями и сестрами в реагирующий маршрутизатор

Question

Я столкнулся с проблемой в реагирующем маршрутизаторе.

У меня есть несколько маршрутов, которые отображают навигационную панель, а некоторые - нет, поэтому я создал родительский компонент, где я могу передать проп, решаяесли я должен показать навигационную панель или нет.

Ожидаемое поведение состоит в том, что он будет идти по маршрутам в поисках маршрута, который соответствует в первом компоненте Master, и если это не работает, то продолжайте идтик следующему, где я на самом деле ловлю его и перенаправляю на 404.

То, что на самом деле происходит, это первый компонент Master, который всегда рендерит, и я получаю либо Master без заголовка navbar, если я нахожусь в / no_bar и в противном случае ничего.

   private routes = (
      <Switch>
         <Route exact path={login} component={Login}/>
         <Route exact path={logout} component={Logout}/>
         <Route exact path={register} component={Register}/>
         <MasterWrapperContainer>
            <Switch>
               <Master>
                  <Switch>
                     <PrivateRoute exact path="/no_bar" component={() => <h2>Master without navbar!</h2>} />
                     <PrivateRoute exact path="/different_no_bar" component={() => <h2>Another route without navbar!</h2>} />
                     <PrivateRoute exact path="/no_bar3" component={() => <h2>Yet another Master without navbar!</h2>} />
                  </Switch>
               </Master>
               <Master navbar>
                  <Switch>
                     <PrivateRoute exact path={joinCourse} component={props => <JoinCourseContainer {...props} />}/>
                     <PrivateRoute exact path={settings} component={UserSettingsContainer} />
                     <PrivateRoute exact path={forbidden} component={ErrorDisplay} />
                     <PrivateRoute exact path={notFound} component={ErrorDisplay} />
                     <PrivateRoute exact path={serverError} component={ErrorDisplay} />
                     <Redirect from="*" to={notFound} />
                  </Switch>
               </Master>
            </Switch>
         </MasterWrapperContainer>
      </Switch>
   );

Answer 1

Поведение Switch таково, что он отображает первый соответствующий маршрут, если он оборачивает коллекцию маршрутов, а если компонент отображается напрямую, он просто отображает первый компонент и останавливается после этого. Вы должны реструктурировать свой код как

<MasterWrapperContainer>
       <Route exact path="/no_bar" render={() => (
         <Master>
           <Switch>
              <PrivateRoute exact path="/no_bar" component={() => <h2>Master without navbar!</h2>} />
           </Switch>
         </Master>
       )} />
       <Master navbar>
          <Switch>
             <PrivateRoute exact path={joinCourse} component={props => <JoinCourseContainer {...props} />}/>
             <PrivateRoute exact path={settings} component={UserSettingsContainer} />
             <PrivateRoute exact path={forbidden} component={ErrorDisplay} />
             <PrivateRoute exact path={notFound} component={ErrorDisplay} />
             <PrivateRoute exact path={serverError} component={ErrorDisplay} />
             <Redirect from="*" to={notFound} />
          </Switch>
       </Master>
 </MasterWrapperContainer>