React项目如何实现侧边栏菜单点击跳转关联页面主体内容

你当前项目已经集成了React Router，只需要补充路由配置、侧边栏跳转链接两个核心部分即可完成需求：

步骤1：新增各菜单项对应的页面组件 #

先创建每个侧边栏选项对应的页面，比如Threads.js、Mentions.js、SavedItems.js等，基础结构可以参考Chat.js：

// 示例：Threads.js
function Threads() {
  return (
    <div>
      <h1>Threads 页面内容</h1>
    </div>
  )
}
export default Threads

步骤2：修改App.js补充路由规则 #

在Switch标签内新增各个路径对应的路由配置：

import Threads from './Threads'
import Mentions from './Mentions'
import SavedItems from './SavedItems'
// 依次引入其他页面组件

function App() {
  return (
    <div className="App">
      <Router>
        <>
          <Header/>
          <AppBody>
            <Sidebar/>
            <Switch>
              <Route path="/" exact>
                <Chat/>
              </Route>
              {/* 新增固定菜单路由 */}
              <Route path="/threads" exact>
                <Threads/>
              </Route>
              <Route path="/mentions" exact>
                <Mentions/>
              </Route>
              <Route path="/saved" exact>
                <SavedItems/>
              </Route>
              {/* 动态频道路由，适配自定义添加的频道 */}
              <Route path="/channel/:channelId">
                <Chat/>
              </Route>
            </Switch>
          </AppBody>
        </>
      </Router>  
    </div>
  )
}

步骤3：修改SidebarOption组件绑定跳转 #

给SidebarOption组件新增path属性，内部使用React Router的NavLink实现跳转，还可以自动识别当前路由添加激活样式：

// SidebarOption.js 示例
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'

// 你的原有样式定义
const SidebarOptionContainer = styled.div`
  // 原有样式不变
  &.active {
    // 自定义选中态样式，比如背景变色、文字高亮
    background: #3f0e40;
    color: white;
  }
`

function SidebarOption({ Icon, title, addChannelOption, path }) {
  // 添加频道按钮单独处理逻辑，不需要跳转
  if(addChannelOption) {
    return (
      <SidebarOptionContainer onClick={() => {/* 你的添加频道逻辑 */}}>
        <Icon />
        <h3>{title}</h3>
      </SidebarOptionContainer>
    )
  }
  return (
    <NavLink to={path} activeClassName="active" style={{textDecoration: 'none'}}>
      <SidebarOptionContainer>
        <Icon />
        <h3>{title}</h3>
      </SidebarOptionContainer>
    </NavLink>
  )
}
export default SidebarOption

步骤4：修改Sidebar.js给每个选项传对应路径 #

function Sidebar() {
  return (
    <SidebarContainer>
      <SidebarHeader>
        <SidebarInfo>
          <h2>React</h2>
          <h3>
            <FiberManualRecordIcon/>
            soft
          </h3>
        </SidebarInfo>
        <CreateIcon/>
      </SidebarHeader>
      <SidebarOption Icon={InsertCommentIcon} title="Threads" path="/threads"/>
      <SidebarOption Icon={InboxIcon} title="Mentions & reactions" path="/mentions"/>
      <SidebarOption Icon={DraftsIcon} title="Saved items" path="/saved"/>
      <SidebarOption Icon={BookmarkBorderIcon} title="Channel browser" path="/channels"/>
      <SidebarOption Icon={PeopleAltIcon} title="People & user groups" path="/users"/>
      <SidebarOption Icon={AppsIcon} title="Apps" path="/apps"/>
      <SidebarOption Icon={FileCopyIcon} title="File browser" path="/files"/>
      <SidebarOption Icon={ExpandLessIcon} title="Show less" path="/"/>
      <hr/>
      <SidebarOption Icon={ExpandMoreIcon} title="Channels" path="/channels"/>
      <hr/>
      <SidebarOption Icon={AddIcon} addChannelOption title="Add Channels"/>
    </SidebarContainer>
  )
}
export default Sidebar;

如果需要实现点击添加频道后跳转到对应频道页面，只需要在添加逻辑执行完成后，调用useHistory的push方法跳转到对应/channel/[新频道id]路径即可。

内容的提问来源于stack exchange，提问作者user10991969