Semantic UI React侧边栏路由组件重叠问题求助（无需CSS外边距）

使用Semantic UI React的Sidebar组件时，点击Home菜单通过React Router路由到Home组件后，Home组件显示在侧边栏后方，希望它能显示在侧边栏右侧，且不想使用CSS左外边距解决该问题。

相关代码 #

Sidebar.jsx #

import React from 'react'
import { Menu, Sidebar } from 'semantic-ui-react'
import { Link } from 'react-router-dom'

const SidebarExampleVisible = () => {
  return(
    <Sidebar
      as={Menu}
      vertical
      visible
      width='thin'
    >
      <Menu.Item as='a'>
        <Link to='/components/Home'>Home</Link>
      </Menu.Item>
      <Menu.Item as='a'>
        Games
      </Menu.Item>
      <Menu.Item as='a'>
        About
      </Menu.Item>
    </Sidebar>
  )
}

export default SidebarExampleVisible

Home.jsx #

import React from 'react'
import { Tab } from 'semantic-ui-react'

const panes = [
  {
    menuItem: 'Tab 1',
    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
  },
  {
    menuItem: 'Tab 2',
    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
  },
  {
    menuItem: 'Tab 3',
    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
  },
]

const TabExamplePointing = () => <Tab menu={{ pointing: true }} panes={panes} />

export default TabExamplePointing

Semantic UI React的Sidebar组件自带配套布局组件，可直接处理侧边栏与主内容的位置关系，无需手动添加CSS外边距。你需要用Sidebar.Pushable作为父容器，并用Sidebar.Pusher包裹路由内容区域，主内容会自动被推到侧边栏右侧。

修改主布局组件（如App.js）示例如下：

import React from 'react'
import { Sidebar } from 'semantic-ui-react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import SidebarExampleVisible from './Sidebar/Sidebar'
import TabExamplePointing from './Home'

function App() {
  return (
    <Router>
      <Sidebar.Pushable>
        <SidebarExampleVisible />
        <Sidebar.Pusher>
          <Routes>
            <Route path="/components/Home" element={<TabExamplePointing />} />
            {/* 其他路由配置 */}
          </Routes>
        </Sidebar.Pusher>
      </Sidebar.Pushable>
    </Router>
  )
}

export default App

说明 #

• Sidebar.Pushable：作为侧边栏与主内容的顶层容器，负责管理两者的布局逻辑。
• Sidebar.Pusher：包裹主内容区域，会自动根据侧边栏的状态调整自身位置，确保内容始终显示在侧边栏右侧。

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