Hello Everyone,
I need a help to setup the admin and user panel routes in ReactJS.
I want to separate admin and front routes.
Please find my below code.
Appp.js File
import React from "react";
import { Admin } from "./Admin";
import { Front } from "./Front";
import {
BrowserRouter as Router,
Routes, Route
} from "react-router-dom";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Front />} />
<Route path="/admin/*" element={<AdminLayout />} />
</Routes>
</Router>
);
}
export default App;
``
AdminLayout.Js
``
import React from "react";
import { Header } from "./Header";
import { Sidebar } from "./Sidebar";
import { Footer } from "./Footer";
import { Dashboard } from "../Dashboard";
import { Products } from "../Products";
import {
BrowserRouter as Router,
Routes, Route
} from "react-router-dom";
export function Layout() {
return(
<div className="container-scroller">
<Header />
<div className="container-fluid page-body-wrapper">
<Sidebar />
<div className="main-panel">
<Routes>
<Route path='/admin/dashboard' element={< Dashboard />}></Route>
<Route path='/admin/products' element={< Products />}></Route>
</Routes>
<Footer />
</div>
</div>
</div>
)
}
``
Same as front layout.
Now when admin/dashboard, will code my dashboard component should be call.
When admin/products will code, then products component will call.
same as in frontend, if users will come into the url, then users component will call.
Top comments (0)