how to render the sublist only when one of the routes inside is active?

Question

const pages: Page = {
termsPage: [

{name: 'First Page', path: '/one/two/'},

{
name: 'Second Page', path: '/three/four/',
routes: [
{name: 'subpage1', path: '/sub1/'},
{name: 'subpage2', path: '/sub2/'}
]
},

{name: 'Third Page', path: '/five/six/'},

{name: 'Fourth Page', path: '/seven/eight/'},

{name: 'Fives Page', path: '/nine/ten/'}

];
}

Answer 1

Ahmad check out how router routes the routes

https://code.sololearn.com/WukMCoMDyUf6/?ref=app

Answer 2

For nested routing, you could use useRouteMatch with useParams.

Answer 3

Ahmad Study the session of Nesed Routing, would help you to build the routes.
https://reacttraining.com/react-router/web/guides/quick-start

Answer 4

Thanks @Calvin that was quite helpful.

Answer 5

@Vivek as you see in this function we have the siblings array routes inside of the secondPage, i want to see the sublist(routes) as i click on the second page and the it redirects to first sublist it becomes active.