Shadcn UI 侧边栏与 React 集成

Question

我在如何在 React 上集成 Shadcn UI 侧边栏时遇到了麻烦，因为在官方文档中，示例是在 typescript（Next.js？）上的，而且我不熟悉 Next.js 框架，因为我目前正在学习 React。谁能帮我将它与我的反应应用程序集成？假设我有这个布局：

应用程序.jsx

import "./App.css";
import LandingPage from "./pages/LandingPage";


function App() {
  return (
    <>
      <LandingPage />
    </>
  );
}

export default App;

Main.jsx

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";

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 />,
  },
  {
    path: "/manage-dormers",
    element: <ManageDormers/>
  },
  {
    path: "/manage-rooms",
    element: <ManageRooms/>
  }
]);

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

注意：我只想在管理房间和管理宿舍等页面上集成侧边栏

Answer 1

shadcn/ui 只是预制组件的集合，因此您可以在自己的应用程序中重用它们，这意味着在 Next.js 或 React.js 中使用它们并不重要。