reactjs - 当我在使用 Reach-Router（或我的顶级路由）的索引路由时，如何有条件地渲染组件？

Question

如果 url 不是“/”，我希望对用户隐藏一个列表。此列表呈现在顶层并包含许多链接。每当我导航回“/”（索引路线）时，我都想再次显示该列表。我怎样才能最有效地使用到达路由器来收听这个位置并相应地更改状态，以便我可以隐藏/显示我的文章列表并使用适当的路径隐藏/显示文章？

我尝试使用导航组件并使用 LocationProvider 组件，但目前卡住了。下面的组件被包裹在一个带有路径'/*'的路由器中

<div>
  <Header />
  <div className='App'>
    <Slide
      direction='right'
      in={true}
      timeout={{
        appear: 0,
        enter: 400,
        exit: 0
      }}
      mountOnEnter
      unmountOnExit>
      <List>{getArticlesList()}</List>
    </Slide>
  </div>

  <Router>{getArticles()}</Router>
</div>

Answer 1

使用反应路由器，您必须指定一个exact path.

<Router>
    <Route exact path="/" component={List} />
</Router>

如果您希望在所有路线上显示某些内容，您可以删除关键字exact并像使用它一样使用它

<Router>
    <Route path="/" component={List} />
</Router>

Answer 2

我通过使用useEffect钩子并通过检查路径名props.location.pathname来查看用户是否在路径中解决了这个问题'/'。如果用户位于顶部路径，则显示列表，否则隐藏列表。