Curious Curious - 6 months ago 203
Javascript Question

Hiding components with react router

I am starting out with React.js just now and I had a question about react router. In particular I am a little confused about what it means to have nested routes in react router. Suppose that I have the following code (taken from react-router's github page)

<Router>
<Route path="/" component={App}>
{/* Show the dashboard at / */}
<IndexRoute component={Dashboard} />
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>


Then what happens when I go to the link
/inbox/messages/<id>
does the inbox component get hidden? Which views hide when you go to a router link and which ones stay in sight? Also how can you keep track of which components are hidden and which are not?

Thanks!

Answer

The inbox component is the parent component

const Inbox = ({ children }) => (
  <div>
    <MessageList />
    { children }
  </div>
)

const Message = ({ content }) => (
  <div>
    { content }
  </div>
)

So you are always going to see the MessageList from any inbox route. Does that help?

Comments