React Router V6 nested components

New to react and kinda confused about the new version of React-router V6 , specifically rendering nested component , below is github respo for a project am building , in the app.js file , i have trid to nest the components Extracurricular & Regular under the components program , but weh i click on the link that suppose to render these components they are not rendering , ill be grateful if someone identify the issue here
regards

https://github.com/freesudani/DCoding-International-School

  1. You are missing the Outlet inside the parent component. Docs nested routes.

  2. Your two nested components are missing the map method.

BTW, it’s confusing that you have them mapping the same data (different files with the same data). You can also simplify the route paths (children inheriting the parent)

Example code, I changed the data being mapped so you can tell which component is being rendered. Not sure if that is actually the result you are looking for but at least it is rendering the components.

Im very appreciative of your feedback , thanks alot , i did what you suggested and it worked , one issue , when i click on any of the buttons on the program component , it renders the extraculicular or regular components but the program component still remains on the page , i tried the exact props but its seems its not working.

im gonna change this data i still havent done with the project , im just want to get through this issue first

That is the point of a nested route, it will render the parent and whatever child the path matches. Look at the docs and read the examples they show what the component tree will look like.