Question

我遇到了react-router的问题。

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

预期的行为是它将沿着路线行驶，以便在第一个主组件中查找匹配的路线，如果该路线不起作用，则继续转到下一个我实际捕获的路线并将其重定向到404。

实际上发生的是第一个Master组件始终呈现，并且如果我在/ no_bar位置，我会获得没有navbar标题的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>

react-router中具有兄弟姐妹的嵌套交换机

1 个答案: