React Router 4 - 不同的布局？

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"。我认为是 "exact" 把一切都搞砸了。

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 - 不同的布局？

React Router 4 - Different Layouts?

javascript

reactjs

react-router

react-router-v4