我有一个应用程序运行良好,管理部分和用户部分。现在的要求是分开管理导航栏用户导航栏。
这里的导航栏目前显示在所有的路线,但我希望它被限制从/管理/...路由。
我的app.js文件如下所示
import { createTheme, ThemeProvider } from "@mui/material";
import { Box } from "@mui/material";
import { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AdminDasboard from "./components/Admin/AdminDasboard";
import AddCategory from "./components/Category/AddCategory";
import CategoryComponent from "./components/Category/CategoryComponent";
import UpdateCategory from "./components/Category/UpdateCategory";
import CookiesPolicy from "./components/CookiesPolicy";
import DataSafety from "./components/DataSafety";
import Navbar from "./components/Navbar";
import EditPost from "./components/Posts/EditPost";
import Post from "./components/Posts/Post";
import PrivacyPolicy from "./components/PrivacyPolicy";
import SinglePostComponent from "./components/SinglePostComponent";
import Blog from "./pages/Blog";
import Home from "./pages/Home";
import Javascript from "./pages/Interview Q/Javascript";
import Node from "./pages/Interview Q/Node";
import React from "./pages/Interview Q/ReactFile";
import Login from "./pages/Login";
import NotFound from "./pages/NotFound";
import AdminHome from "./pages/PrivateRoutes/AdminHome";
import { PrivateRoute } from "./pages/PrivateRoutes/PrivateRoutes";
import Register from "./pages/Register";
import Write from "./pages/Write";
const App = () => {
const [isAuth, setIsAuth] = useState(false);
const [mode, setMode] = useState("light");
const darkTheme = createTheme({
palette: {
mode: mode,
},
});
return (
<Router>
<ThemeProvider theme={darkTheme}>
<Box bgcolor={"background.default"} color={"text.primary"}>
<Navbar // This is showing in all routes
isAuth={isAuth}
setIsAuth={setIsAuth}
mode={mode}
setMode={setMode}
/>
<Routes>
<Route
exact
path="/"
element={
<Home setIsAuth={setIsAuth} mode={mode} setMode={setMode} />
}
/>
<Route
exact
path="/posts/:id"
setIsAuth={setIsAuth}
element={<SinglePostComponent />}></Route>
<Route path="/write" element={<Write isAuth={isAuth} />}></Route>
<Route path="/blog" element={<Blog />}></Route>
<Route
path="/interview-qa/node-js-interview-questions"
element={<Node />}></Route>
<Route
path="/interview-qa/react-js-interview-questions"
element={<React />}></Route>
<Route
path="/interview-qa/js-interview-questions"
element={<Javascript />}></Route>
{/* static pages */}
<Route path="/privacy-policy" element={<PrivacyPolicy />}></Route>
<Route path="/cookies-policy" element={<CookiesPolicy />}></Route>
<Route path="/data-policy" element={<DataSafety />}></Route>
<Route
path="/login"
element={<Login setIsAuth={setIsAuth} />}></Route>
<Route path="/register" element={<Register />}></Route>
<Route path="*" element={<NotFound />} />
{/* Admin Routes */}
<Route path="/admin" element={<PrivateRoute />}> { /*need different Navbar for this route or no route at all for this but not the current Navbar */}
<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>
</Routes>
</Box>
</ThemeProvider>
</Router>
);
};
export default App;
我希望导航栏是不同的管理员部分。
我怎么才能做到呢?
1条答案
按热度按时间brgchamk1#
您可以添加一个只有导航栏的外部路径,所有需要导航栏的路径都嵌套在其中
在导航栏中,现在您将添加Outlet,您希望在此处显示与路线相关的组件
//在导航栏内部. js