Nested Routes in ReactJS

Question

I'm not sure how to get either a nested route to display two components at the same time or even two non nested routes to display two components at the same time.

My routing looks like:

export default (    
    <Route path="/" component={Index}>
        <Route path="/nextpage" component={Index2} />
    </Route>
);

which gets utilized within my provider

export default (
  <Provider store={store}>
    <Router history={browserHistory}>{routes}</Router>
  </Provider>
);

I'm new to react, but my understanding is that when I visit endpoint nextpage, that both Index and Index2 should be rendered. However, only the first component is rendered. Is there anything else I have to do to make both components appear?

Amberlamps · Accepted Answer · 2017-03-10 19:08:56Z

2

Every child of Route is going to be available as props.children.

When you are at /, Index is going to be rendered with props.children being empty.

When you are at /nextpage, Index is going to be rendered as well, but this time props.children contains Index2.

So, in Index you have to think about where you want to render props.children.

answered Mar 10, 2017 at 19:08

Amberlamps

40.7k6 gold badges46 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Over a year ago

Thanks, can't believe I missed something so simple.

Collectives™ on Stack Overflow

Nested Routes in ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related