路由路径始终渲染

Question

我有这样的连接路由器设置：

<div>
  <Firebase />

  <LoginPopup />
  <RegisterPopup />
  <NavMenuContainer />
  <Navigation />


  <Route path={'/counter'} component={CounterView} />
  <Route path={'/router'} component={RouterView} />
  <Route path={'/calender'} component={CalenderView} />
  <Route path={'/'} component={HomeView} />
</div>

无论我在哪条路线（即 /CounterView 或 /RouterView）我总是看到 'HomeView' 在底部呈现，如果我在根 URL （/ ) 我只看到 HomeView。

如何让 HomeView 仅在根目录下显示 URL？

Answer 1

在 react router v4 中，你可以通过提供精确的 props 来完成，为了进一步阅读，请检查 this out

<div>
  <Firebase />

  <LoginPopup />
  <RegisterPopup />
  <NavMenuContainer />
  <Navigation />


  <Route path={'/counter'} component={CounterView} />
  <Route path={'/router'} component={RouterView} />
  <Route path={'/calender'} component={CalenderView} />
  <Route path={'/'} exact component={HomeView} />
</div>

Answer 2

将 exact 添加到您的 HomeView 路线。

<Route exact path={'/'} component={HomeView} />

React Router v4 将显示 return match.location.pathname.includes(path) 的所有路由，除非您在路由中包含 exact。

您可以阅读 exact property in the official React Router 文档。

路由路径始终渲染

Route path always rendering

reactjs

react-redux

react-router-v4