在react-router中使用兄弟姐妹的嵌套交换机

Question

我遇到了react-router的问题。

我有一些显示导航栏的路线，有些则没有，所以我创建了一个父组件，我可以在其中传递决定我是否应该显示导航栏的道具。

预期的行为是它将沿着路线向下寻找在第一个Master组件中匹配的路由，如果这不起作用，那么继续前往我实际捕获它的下一个并重定向到404。

实际发生的是第一个Master组件总是渲染，如果我在/ no_bar，我得到没有导航栏标题的Master，否则没有。

   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的行为是这样的，如果它包装了Route的集合，它会呈现第一个匹配的Route，如果直接呈现该组件，它只会呈现第一个组件并在此之后停止。您需要重新构建代码

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