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。

如何在Home URL中仅显示HomeView？

Answer 1

在反应路由器v4中，您可以通过提供精确的道具来进行，以便进一步阅读this

<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将显示为match.location.pathname.includes(path)返回true的所有路由，除非您在路由中包含exact。

您可以在官方exact文档中了解React Router属性。

路径路径始终呈现

2 个答案: