Question

我知道有人问过几次，但是似乎没有什么真正适用于我。

我有这个

App.js

<React.Fragment>
  <Switch>
    <Route path="/members" component={MemberAreaComponent} />
    <Route exact path="/" component={NonMemberAreaComponent} />
    <Route component={NotFoundComponent} />
  </Switch> 
</React.Fragment >

在成员区域组件中，我拥有

// other html above here  

<div className="main-area">
  <main>
    <Switch>
      <Route path="/members/home" component={HomeComponent} />
    </Switch> 
  </main>
</div>

NonMemberAreaComponent

<div className="non-members-area-container">
  <Route path="/login" component={LoginComponent} />
  <Route path="/" component={NonMemberHomeComponent} />
</div>

当我尝试执行/ Login时，我不断获取“ NotFoundComponent”。我认为是什么把所有事情搞砸了。

Answer 1

您的第二个Route仅在路径完全 /时匹配。移除exact道具，使其在/只是路径的一部分时处于活动状态。

<React.Fragment>
  <Switch>
    <Route path="/members" component={MemberAreaComponent} />
    <Route path="/" component={NonMemberAreaComponent} />
    <Route component={NotFoundComponent} />
  </Switch> 
</React.Fragment>

React Router 4-不同的布局？

1 个答案: