如何在React JS中为Admin Dashboard配置独立导航栏？

要解决Admin路由和普通路由导航栏分离的需求，下面提供两种简单可行的实现方式：

方法一：拆分路由布局（推荐，结构更清晰） #

这种方式将普通用户路由和Admin路由分成独立的两组，每组用对应的导航栏包裹，逻辑直观且易于维护。

步骤： #

1. 先导入你的Admin导航栏组件（假设你已创建AdminNavbar，路径为./components/Admin/AdminNavbar）
2. 在App组件内创建两个布局组件，分别对应普通用户和Admin的页面框架：

// 普通用户布局：包含普通Navbar和路由内容
const UserLayout = ({ children }) => (
  <>
    <Navbar 
      isAuth={isAuth}
      setIsAuth={setIsAuth}
      mode={mode}
      setMode={setMode}
    />
    {children}
  </>
);

// Admin布局：包含Admin Navbar和路由内容
const AdminLayout = ({ children }) => (
  <>
    <AdminNavbar 
      // 传递Admin导航栏需要的props，比如权限状态、主题模式等
      isAuth={isAuth}
      setIsAuth={setIsAuth}
      mode={mode}
      setMode={setMode}
    />
    {children}
  </>
);

3. 修改Routes结构，将普通路由嵌套在UserLayout下，Admin路由嵌套在AdminLayout下（注意Admin路由仍需保留PrivateRoute的权限校验）：

修改后的App.js核心代码：

return (
  <Router>
    <ThemeProvider theme={darkTheme}>
      <Box bgcolor={"background.default"} color={"text.primary"}>
        <Routes>
          {/* 普通用户路由组 */}
          <Route element={<UserLayout />}>
            <Route
              exact
              path="/"
              element={<Home setIsAuth={setIsAuth} mode={mode} setMode={setMode} />}
            />
            <Route exact path="/posts/:id" element={<SinglePostComponent />} />
            <Route path="/write" element={<Write isAuth={isAuth} />} />
            <Route path="/blog" element={<Blog />} />
            <Route path="/interview-qa/node-js-interview-questions" element={<Node />} />
            <Route path="/interview-qa/react-js-interview-questions" element={<React />} />
            <Route path="/interview-qa/js-interview-questions" element={<Javascript />} />
            {/* 静态页面路由 */}
            <Route path="/privacy-policy" element={<PrivacyPolicy />} />
            <Route path="/cookies-policy" element={<CookiesPolicy />} />
            <Route path="/data-policy" element={<DataSafety />} />
            <Route path="/login" element={<Login setIsAuth={setIsAuth} />} />
            <Route path="/register" element={<Register />} />
            <Route path="*" element={<NotFound />} />
          </Route>

          {/* Admin路由组 */}
          <Route path="/admin" element={<PrivateRoute />}>
            <Route element={<AdminLayout />}>
              <Route path="dashboard" element={<AdminDasboard />} />
              <Route path="posts" element={<Post />} />
              <Route path="posts/edit-post/:id" element={<EditPost />} />
              <Route path="categories" element={<CategoryComponent />} />
              <Route path="categories/add-category" element={<AddCategory />} />
              <Route path="categories/edit-category/:id" element={<UpdateCategory />} />
            </Route>
          </Route>
        </Routes>
      </Box>
    </ThemeProvider>
  </Router>
);

方法二：用useLocation动态判断导航栏 #

如果不想拆分路由结构，可以通过当前路径动态决定渲染哪个导航栏：

步骤： #

1. 导入useLocation钩子：

import { useLocation } from "react-router-dom";

2. 在App组件内获取当前路径并判断是否为Admin路由：

const location = useLocation();
const isAdminRoute = location.pathname.startsWith("/admin");

3. 替换原有的Navbar代码，根据判断结果渲染对应导航栏：

{!isAdminRoute ? (
  <Navbar 
    isAuth={isAuth}
    setIsAuth={setIsAuth}
    mode={mode}
    setMode={setMode}
  />
) : (
  <AdminNavbar 
    isAuth={isAuth}
    setIsAuth={setIsAuth}
    mode={mode}
    setMode={setMode}
  />
)}

如果Admin路由不需要导航栏，直接将else部分替换为null即可。

内容的提问来源于stack exchange，提问作者Shiv Shankar Prasad