How do I make home page JSX disappear after navigating to sub page
Closed this issue · 1 comments
mjm5vp commented
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')
);
nayana487 commented
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