如何实现React侧边栏点击后在内容区加载对应组件的路由？

要实现侧边栏点击后在Home的ContentArea加载对应组件，核心是使用React Router的嵌套路由+Outlet组件，结合Link跳转。以下是具体修改步骤：

1. 调整App.js的路由结构，配置Home的嵌套子路由 #

把Home路由设置为父路由，内部定义各个菜单项的子路由，子路由会自动渲染在Home的Outlet位置：

import { Routes, Route } from 'react-router-dom';
import LoginSignup from './LoginSignup';
import Home from './Home';
// 导入你的Item1、Item2、Item3组件
import Item1 from './Item1';
import Item2 from './Item2';
import Item3 from './Item3';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<LoginSignup />} />
        {/* Home作为父路由，嵌套子路由 */}
        <Route path="/home" element={<Home />}>
          {/* 默认子路由：进入/home时默认显示的组件 */}
          <Route index element={<Item1 />} />
          {/* 各个菜单项的子路由 */}
          <Route path="item1" element={<Item1 />} />
          <Route path="item2" element={<Item2 />} />
          <Route path="item3" element={<Item3 />} />
        </Route>
      </Routes>
    </div>
  );
}

2. 修改Sidebar组件，用Link替换普通li实现跳转 #

导入React Router的Link组件，把菜单项改成Link，同时修复handleLogout的navigate使用问题：

import { Link, useNavigate } from 'react-router-dom';

const Sidebar = () => {
  const navigate = useNavigate();

  const handleLogout = () => {
    navigate('/');
  }

  return (
    <div className='sidebar-content-menu'>
      <ul className='menu-list'>
        <div>
          {/* 使用相对路径跳转，自动拼接父路由/home */}
          <li><Link to="item1">Item1</Link></li>
          <li><Link to="item2">Item2</Link></li>
          <li><Link to="item3">Item3</Link></li>
        </div>
        <div>
          <li onClick={handleLogout}>Logout</li>
        </div>
      </ul>
    </div>
  )
}

3. 修改Home组件，添加Outlet渲染子路由内容 #

导入Outlet组件，放在你指定的内容显示区域：

import { Outlet, useNavigate } from 'react-router-dom';
import Header from './Header';
import Sidebar from './Sidebar';

const Home = () => {
  const navigate = useNavigate();

  const handleLogout = () => {
    navigate('/');
  }

  return (
    <div className='home-container'>
      <div className='home-wrapper'>
        <div className='home-content'>
          <div className='home-content-side-menu-holder'>
            <h1>ZERO</h1>
            <div className='sidebar-content-menu'>
              <Sidebar />
            </div>
          </div>
          <div className='home-content-menu-content-section'>
            <Header />
            <div className='side-menu-content-section'>
              <div className='side-menu-content-viewer'>
                {/* 这里用Outlet渲染子路由的组件 */}
                <Outlet />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

关键说明 #

• 嵌套路由的父路由必须包含<Outlet />，用来承载子路由的组件内容
• Sidebar里的Link使用相对路径（to="item1"），会自动拼接父路由的路径（/home），最终跳转路径为/home/item1
• 若需要设置进入/home时默认显示的组件，添加index路由即可

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