如何在React项目中集成Shadcn UI侧边栏（仅指定页面）

1. 准备Shadcn UI侧边栏组件（JSX版本） #

把官方TypeScript示例转成JavaScript版本，创建components/Sidebar.jsx：

import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { LayoutDashboard, Users, LogOut } from "@radix-ui/react-icons";
import { Button } from "../components/ui/button"; // 替换为你项目中Shadcn组件的实际路径
import { Sheet } from "../components/ui/sheet";

export default function Sidebar() {
  const [isSheetOpen, setIsSheetOpen] = useState(false);
  const location = useLocation();

  const navItems = [
    { href: "/manage-dormers", label: "管理住户", icon: <Users className="h-5 w-5" /> },
    { href: "/manage-rooms", label: "管理房间", icon: <LayoutDashboard className="h-5 w-5" /> },
    { href: "/manage", label: "权限管理", icon: <Users className="h-5 w-5" /> },
  ];

  return (
    <>
      {/* 移动端侧边栏触发按钮 */}
      <Button
        variant="ghost"
        size="icon"
        onClick={() => setIsSheetOpen(true)}
        className="md:hidden fixed top-4 left-4 z-50"
      >
        <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </Button>

      {/* 桌面端固定侧边栏 */}
      <div className="hidden md:flex flex-col w-64 h-screen fixed left-0 top-0 bg-white border-r p-4">
        <div className="font-bold text-xl mb-8">后台管理</div>
        <nav className="space-y-2">
          {navItems.map((item) => (
            <Link
              key={item.href}
              to={item.href}
              className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${
                location.pathname === item.href ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-100"
              }`}
            >
              {item.icon}
              <span>{item.label}</span>
            </Link>
          ))}
        </nav>
        <div className="mt-auto">
          <Button variant="ghost" className="w-full justify-start">
            <LogOut className="h-5 w-5 mr-2" />
            退出登录
          </Button>
        </div>
      </div>

      {/* 移动端侧边栏面板 */}
      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
        <Sheet.Content side="left" className="w-64 p-4">
          <div className="font-bold text-xl mb-8">后台管理</div>
          <nav className="space-y-2">
            {navItems.map((item) => (
              <Link
                key={item.href}
                to={item.href}
                onClick={() => setIsSheetOpen(false)}
                className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${
                  location.pathname === item.href ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-100"
                }`}
              >
                {item.icon}
                <span>{item.label}</span>
              </Link>
            ))}
          </nav>
          <div className="mt-auto">
            <Button variant="ghost" className="w-full justify-start">
              <LogOut className="h-5 w-5 mr-2" />
              退出登录
            </Button>
          </div>
        </Sheet.Content>
      </Sheet>
    </>
  );
}

2. 创建管理后台布局组件 #

创建layouts/AdminLayout.jsx，统一给指定页面套侧边栏：

import Sidebar from "../components/Sidebar";
import { Outlet } from "react-router-dom";

export default function AdminLayout() {
  return (
    <div className="flex">
      <Sidebar />
      {/* 主内容区域，桌面端预留侧边栏宽度 */}
      <main className="md:ml-64 flex-1 p-6">
        <Outlet /> {/* 渲染子路由对应的页面内容 */}
      </main>
    </div>
  );
}

3. 修改路由配置（Main.jsx） #

将需要侧边栏的页面挂载到AdminLayout下，作为子路由：

import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App.jsx";
import AdminPermits from "./pages/AdminPermits.jsx";
import DormerHomepage from "./pages/DormerHomepage.jsx";
import TransientView from "./pages/TransientView.jsx";
import TransientSuccess from "./pages/TransientSuccess.jsx";
import TransientBooking from "./pages/TransientBooking.jsx";
import LoginPage from "./pages/Login.jsx";
import TestDormPage from "./pages/TestDormerPage.jsx";
import ManageDormers from "./pages/ManageDormers.jsx";
import ManageRooms from "./pages/ManageRooms.jsx";
// 导入新增的布局组件
import AdminLayout from "./layouts/AdminLayout.jsx";

const router = createBrowserRouter([
  { path: "/", element: <App /> },
  { path: "/manage", element: <AdminPermits /> },
  { path: "/dormer", element: <DormerHomepage /> },
  { path: "/transient", element: <TransientView /> },
  { path: "/transient-success", element: <TransientSuccess /> },
  { path: "/transient-booking", element: <TransientBooking /> },
  { path: "/login", element: <LoginPage /> },
  { path: "/testDormer", element: <TestDormPage /> },
  // 用AdminLayout包裹需要侧边栏的页面
  {
    element: <AdminLayout />,
    children: [
      { path: "/manage-dormers", element: <ManageDormers /> },
      { path: "/manage-rooms", element: <ManageRooms /> },
      // 后续新增的后台页面直接加在这里即可
    ]
  }
]);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

4. 页面样式适配 #

如果ManageDormers.jsx、ManageRooms.jsx之前有全屏样式，建议移除默认的margin/padding，因为布局已经给主内容区域设置了内边距。

注意事项 #

• 确保已按Shadcn UI文档安装依赖（如@radix-ui/react-icons、class-variance-authority），并配置好Tailwind CSS。
• 组件路径需根据你项目的实际结构调整，比如../components/ui/button要对应你项目中Shadcn组件的存放位置。

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