how can I render different component with routes in react

Question

Its my routes in react

const router = createBrowserRouter([
  {path: '/', element: <App />},
  {path: '/createCV',
   element: <Layout />,
   children: 
   [ 
    {path: 'info', element: <Info />}
    {path: 'education', element: <Education />}
   ]}
])

And this is my layout component

const Layout = () => {
    return (
        <div className='layout'>
            <Info/> {/*Here*/}
           
            
            <div className='updatedCv'></div>
        </div>
    )
}

as u find 'here' in the second code, I Want to render component depended on the rout. for example: if route is 'localhost:/createCV/info' I need to render Info component, And if route is 'localhost:/createCV/education' I want to render Education component. And div which have classname 'updateCV' need to be always here.

In angular its router. I want something similiar if its possible in react.

Answer 1

You can use react-router-dom for this. And it will be like:

const Layout = () => {
    return (
        <div className='layout'>
            <Link to="profile">Profile</Link>
            <Link to="account">Account</Link>
           
            
            <div className='updatedCv'></div>
        </div>
    )
}

And you need to change yout root file:

<Routes>
    <Route path='createCV' element={...}>
        <Route path='info' element={Info}></Route>
        <Route path='education' element={Education}></Route>
    </Route>
</Routes>