ga-wdi-exercises/project4

How do I make home page JSX disappear after navigating to sub page

Closed this issue · 1 comments

I want to have a home page ("/") with two links: "/map" and "/questions. How do I structure my index.js so that when I select a link to either, all the contents from the ('/') page go away. I have only been able to mount "/map" or "/questions" on top of the JSX from the home page.

index.js

ReactDOM.render(

<Router>
  <div className ="mapContainer">

// I want these two links to disappear when I go to '/questions' or '/map'
    <div className="testLink"><Link to="/questions">Questions</Link></div>
    <div className="testLink"><Link to="/map">Map</Link></div>

    <main className="mapContainer">
      <Route path="/questions" render={() => <Questions className='map'/>}/>
      <Route path="/map" render={() => <App className='map'/>}/>
    </main>
  </div>
</Router>
,
document.getElementById('root')



);

Could you wrap it in a conditional where the link divs have a display:none if you're on those pages? https://facebook.github.io/react/docs/conditional-rendering.html