Reactjs 如何将侧边栏菜单项与应用程序正文链接？

我有一个react.js项目，我想链接我在下图中绘制的侧栏菜单。当任何用户单击侧边菜单项时，它可以链接到他们的身体。我在互联网上搜索了这么多资料，他们做起来很容易，但我不知道如何应用这个项目，任何想法都将受到赞赏

屏幕截图：

function App() {
 return (
<div className="App">
 
 <Router>
  <>
  <Header/>
  <AppBody>
    <Sidebar/>
  <Switch>
      <Route path="/" exact>
     <Chat/>
      </Route>
    </Switch>
      </AppBody>
    
    </>
   </Router>  
   </div>
   );}

 function Chat() {
 return <ChatContainer>
    <h1>Chat screen will be here</h1>

    <ChatInput/>
   </ChatContainer>
   }
 export default Chat;

function Sidebar() {
return (
   <SidebarContainer>
 <SidebarHeader>
  <SidebarInfo>
  <h2>React</h2>

  <h3>
      <FiberManualRecordIcon/>
      soft
  </h3>
  </SidebarInfo>
  <CreateIcon/>
  </SidebarHeader>
  <SidebarOption Icon={InsertCommentIcon} title="Threads"/>
  <SidebarOption Icon={InboxIcon} title="Mentions & reactions"/>
  <SidebarOption Icon={DraftsIcon} title="Saved items"/>
  <SidebarOption Icon={BookmarkBorderIcon} title="Channel browser"/>
  <SidebarOption Icon={PeopleAltIcon} title="People & user groups"/>
  <SidebarOption Icon={AppsIcon} title="Apps"/>
  <SidebarOption Icon={FileCopyIcon} title="File browser"/>
  <SidebarOption Icon={ExpandLessIcon} title="Show less"/>
  <hr/>
   <SidebarOption Icon={ExpandMoreIcon} title="Channels"/>
   <hr/>
   <SidebarOption Icon={AddIcon} addChannelOption title="Add Channels"/>

   </SidebarContainer>
   )}
   export default Sidebar;

App.js:

function App() {
 return (
<div className="App">
 
 <Router>
  <>
  <Header/>
  <AppBody>
    <Sidebar/>
  <Switch>
      <Route path="/" exact>
     <Chat/>
      </Route>
    </Switch>
      </AppBody>
    
    </>
   </Router>  
   </div>
   );}

 function Chat() {
 return <ChatContainer>
    <h1>Chat screen will be here</h1>

    <ChatInput/>
   </ChatContainer>
   }
 export default Chat;

function Sidebar() {
return (
   <SidebarContainer>
 <SidebarHeader>
  <SidebarInfo>
  <h2>React</h2>

  <h3>
      <FiberManualRecordIcon/>
      soft
  </h3>
  </SidebarInfo>
  <CreateIcon/>
  </SidebarHeader>
  <SidebarOption Icon={InsertCommentIcon} title="Threads"/>
  <SidebarOption Icon={InboxIcon} title="Mentions & reactions"/>
  <SidebarOption Icon={DraftsIcon} title="Saved items"/>
  <SidebarOption Icon={BookmarkBorderIcon} title="Channel browser"/>
  <SidebarOption Icon={PeopleAltIcon} title="People & user groups"/>
  <SidebarOption Icon={AppsIcon} title="Apps"/>
  <SidebarOption Icon={FileCopyIcon} title="File browser"/>
  <SidebarOption Icon={ExpandLessIcon} title="Show less"/>
  <hr/>
   <SidebarOption Icon={ExpandMoreIcon} title="Channels"/>
   <hr/>
   <SidebarOption Icon={AddIcon} addChannelOption title="Add Channels"/>

   </SidebarContainer>
   )}
   export default Sidebar;

函数应用程序（）{
返回(
);}

Chat.js:

function App() {
 return (
<div className="App">
 
 <Router>
  <>
  <Header/>
  <AppBody>
    <Sidebar/>
  <Switch>
      <Route path="/" exact>
     <Chat/>
      </Route>
    </Switch>
      </AppBody>
    
    </>
   </Router>  
   </div>
   );}

 function Chat() {
 return <ChatContainer>
    <h1>Chat screen will be here</h1>

    <ChatInput/>
   </ChatContainer>
   }
 export default Chat;

function Sidebar() {
return (
   <SidebarContainer>
 <SidebarHeader>
  <SidebarInfo>
  <h2>React</h2>

  <h3>
      <FiberManualRecordIcon/>
      soft
  </h3>
  </SidebarInfo>
  <CreateIcon/>
  </SidebarHeader>
  <SidebarOption Icon={InsertCommentIcon} title="Threads"/>
  <SidebarOption Icon={InboxIcon} title="Mentions & reactions"/>
  <SidebarOption Icon={DraftsIcon} title="Saved items"/>
  <SidebarOption Icon={BookmarkBorderIcon} title="Channel browser"/>
  <SidebarOption Icon={PeopleAltIcon} title="People & user groups"/>
  <SidebarOption Icon={AppsIcon} title="Apps"/>
  <SidebarOption Icon={FileCopyIcon} title="File browser"/>
  <SidebarOption Icon={ExpandLessIcon} title="Show less"/>
  <hr/>
   <SidebarOption Icon={ExpandMoreIcon} title="Channels"/>
   <hr/>
   <SidebarOption Icon={AddIcon} addChannelOption title="Add Channels"/>

   </SidebarContainer>
   )}
   export default Sidebar;

功能聊天（）{
返回
聊天屏幕将在这里
}
导出默认聊天；

Sidebar.js:

function App() {
 return (
<div className="App">
 
 <Router>
  <>
  <Header/>
  <AppBody>
    <Sidebar/>
  <Switch>
      <Route path="/" exact>
     <Chat/>
      </Route>
    </Switch>
      </AppBody>
    
    </>
   </Router>  
   </div>
   );}

 function Chat() {
 return <ChatContainer>
    <h1>Chat screen will be here</h1>

    <ChatInput/>
   </ChatContainer>
   }
 export default Chat;

function Sidebar() {
return (
   <SidebarContainer>
 <SidebarHeader>
  <SidebarInfo>
  <h2>React</h2>

  <h3>
      <FiberManualRecordIcon/>
      soft
  </h3>
  </SidebarInfo>
  <CreateIcon/>
  </SidebarHeader>
  <SidebarOption Icon={InsertCommentIcon} title="Threads"/>
  <SidebarOption Icon={InboxIcon} title="Mentions & reactions"/>
  <SidebarOption Icon={DraftsIcon} title="Saved items"/>
  <SidebarOption Icon={BookmarkBorderIcon} title="Channel browser"/>
  <SidebarOption Icon={PeopleAltIcon} title="People & user groups"/>
  <SidebarOption Icon={AppsIcon} title="Apps"/>
  <SidebarOption Icon={FileCopyIcon} title="File browser"/>
  <SidebarOption Icon={ExpandLessIcon} title="Show less"/>
  <hr/>
   <SidebarOption Icon={ExpandMoreIcon} title="Channels"/>
   <hr/>
   <SidebarOption Icon={AddIcon} addChannelOption title="Add Channels"/>

   </SidebarContainer>
   )}
   export default Sidebar;

函数侧栏（）{
返回(
反应
软的


)}
导出默认边栏；

您需要用

链接

组件包装

侧栏

选项。并通过

Route

呈现

MainContent

。因此，当您单击侧边栏中的项目时，您将更新路由，

路由

组件将在路径匹配时呈现其组件