How to make a react single page application when some pages have other menus

Question

I am not sure if I worded my problem appropriately, but basically I am trying to make a single page application using React. So far, it has all gone pretty smoothly changing between pages from the main navbar by using the React Routes, which I learned by following this tutorial: https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm

However, what I am working on also has secondary menus within each page, that change other things displayed on the screen. I made a simple drawing on paint trying to explain what I am trying to do here: So what can I do to change what is displayed on the right by clicking on the menu on the left? Is it some sort of second 'layer'of react-routes? Do I include in the main page where I defined all the pages?

Thanks!

Answer 1

Have a look in here:

https://github.com/yamill/React-Boilerplate/blob/master/node_modules/react-router/docs/guides/RouteConfiguration.md#adding-an-index

You can nest your routes.