Curious Curious - 1 year ago 445
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)

<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} />

Then what happens when I go to the link
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?


Answer Source

The inbox component is the parent component

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

const Message = ({ content }) => (
    { content }

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download