0

I want a list to be hidden from the user if the url is not '/'. This list renders at the top level and consists of many links. Whenever I navigate back to '/' (index route) I want to show the list again. How can I use reach router most effectively to listen to this location and change the state accordingly so I can hide/show my article list and hide/show the article with the appropriate path?

I tried using the navigation component and played around with the LocationProvider component but am currently stuck. The below component is wrapped in a Router with path '/*'

<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>
m_b_cool
  • 1
  • 3

2 Answers2

0

Using react router you have to specify an exact path. 

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

If you wanted something to display on all routes you could remove the keyword exact and use it like 

<Router>
    <Route path="/" component={List} />
</Router>
Jake
  • 712
  • 7
  • 20
  • ah I see in that case it Reach router takes care of exact pathing for you. All you need to do is nest your components properly within the router. Can you post the getArticle() function so we can see what is being mapped to your router? – Jake Jul 23 '19 at 02:33
  • getArticle() creates a Article components that generates a path based on the title. Something like this ```
    ``` so you click on the link and the article renders according to that path which is great but now my problem is how to hide that list because the article renders right below it. When i hit back -- we are good because now I am just viewing the list on the top level path.     – m_b_cool Jul 23 '19 at 02:48
0

I solved this problem by using the useEffect hook and checking the pathname via props.location.pathname to see if the user is at the path '/'. If the user is at the top path, then I show the list, if not I hide the list.

m_b_cool
  • 1
  • 3