ReactJS中如何设置嵌套路由和嵌套组件

Question

I am trying to implement a Dashboard (Admin-UI) using ReactJS, but the problem is I can't set up the nested routing and components for that. I want to load the components on the same page (Home) without going to a new page, as well as loading components based on the SideNav. How to do that? Admin-UI

Answer 1

A very high level way to achieve this to be:

have a home component, which contains 2 components, side nav and display screen.

declare all the controlling states in the home component and pass them as props for the 2 child components. Use side nav to change the controlling state in home component and use those states and some conditional logic to render the components inside display screen.

Also, please add a code snippet in future. People will be able to help you better.