How to render components inside a container in a page based on links pressed

I have a page called Teacher.js which is supposed to hold content related to that teacher. I have a sidebar having different links like profile, information etc. I want if a user presses suppose profile, the profile component to load on the right side of the sidebar just any website would do. I am new to react. what should I do?

what I want more clearly:

So if someone presses suppose profile, I want the profile component to render in the highlighted blue area where "this is the main content" is written

CodePudding user response：

Add a routing library to your project, such as react-router. Then have the parent render the sidebar and the main content should be rendered using the router.

Inside the sidebar, each section should then just be a link to the correct route.

It would look something like this:

export const TeacherContainer = () => {
  return (
    <div>
      <Sidebar />
      <Routes>
        <Route path="profile" element={<TeacherProfile />}>
        <Route path="info" element={<TeacherInformation />}>
        // etc.
      </Routes>
    </div>
  );
};