当我使用 Reach-Router 处于索引路由(或我的顶级路由)时，如何有条件地渲染组件

Question

如果网址不是'/'，我希望对用户隐藏一个列表。此列表在顶层呈现，由许多链接组成。每当我导航回"/"(索引路由(时，我都想再次显示列表。如何最有效地使用到达路由器来侦听此位置并相应地更改状态，以便我可以隐藏/显示我的文章列表并使用适当的路径隐藏/显示文章？

我尝试使用导航组件并使用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 检查路径名以查看用户是否位于路径'/' 来解决此问题。如果用户位于顶部路径，则显示列表，如果不是，则隐藏列表。