Routes management for admin and user panel.

olivernarsinghani — Mon, 19 Sep 2022 02:13:58 +0000

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.

DEV Community: olivernarsinghani

Routes management for admin and user panel.