当我在使用Reach-Router的索引路由(或顶级路由)时，如何有条件地呈现组件？

Question

如果url不是'/‘，我想对用户隐藏一个列表。此列表在顶层呈现，并包含许多链接。每当我导航回'/‘(索引路由)时，我想再次显示该列表。如何最有效地使用reach路由器来监听此位置并相应地更改状态，以便我可以隐藏/显示文章列表，并使用适当的路径隐藏/显示文章？

我尝试使用导航组件并尝试使用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

使用react路由器时，您必须指定exact path。

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

如果您想要在所有路径上显示内容，可以移除关键字exact并使用它，如下所示

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

Answer 2

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