如何根据按下的链接在页面中的容器内呈现组件 - ReactJs

Question

我有一个名为 Teacher.js 的页面，该页面应该包含与该老师相关的内容。我有一个侧边栏有不同的链接，如配置文件、信息等。我想如果用户按下假设配置文件，配置文件组件加载到侧边栏的右侧，任何网站都可以。我是新来的。我该怎么办？

我想要的更清楚：

因此，如果有人按下假设配置文件，我希望配置文件组件呈现在写有“这是主要内容”的突出显示的蓝色区域中

Answer 1

将路由库添加到您的项目中，例如react-router。然后让父级渲染侧边栏，主要内容应该使用路由器渲染。

在侧边栏内，每个部分应该只是 link 到正确的路线。

看起来像这样：

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

如何根据按下的链接在页面中的容器内呈现组件 - ReactJs

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

reactjs

react-component