how to redirect admin to diffeerent child page in react router dom

I am facing an issue in using react-router-dom. I have an admin if admin click any particular option like ALL USER, add project
if admin clicks any particular option like ALL USER, add project then it will render the second page so my question is to how to do child specify redirect.

I tried using normal Link to but if click any option in admin then it will redirect to the whole different new page instant of under the admin/user. see the image

enter image description here

This is My App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Navbar from './components/Navbar';
import Contact from './components/Contact';
import Service from './components/Service'
import Login from './components/Login';
// Redirect to their dashboar
import Admin from './components/dashboard/Admin';
import Employee from './components/dashboard/Employee';
import Publisher from './components/dashboard/Publisher';
//Toast error message show
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import Reset from './components/Reset';
import Newpassword from './components/Newpassword';

//admin Routes
import Project from './components/dashboard/AdminPages/Project'
import User from './components/dashboard/AdminPages/User';

function App() {

  return (
    <div>

      <Router>
        <Navbar />
        <Routes>

          <Route exact path="/" element={<Home />} />
          <Route exact path="/service" element={<Service />} />
          <Route exact path="/contact" element={<Contact />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/reset" element={<Reset />} />
          <Route exact path="/reset/:token" element={<Newpassword />} />
          {/* Redirect to their dashboard */}
          <Route exact path="/admin" element={<Admin />} />
          <Route exact path="/employee" element={<Employee />} />
          <Route exact path="/publisher" element={<Publisher />} />
          {/* admin pages */}
          <Route exact path="/publisher" element={<Project />} />
          <Route exact path="/user" element={<User />} />

        </Routes>
      </Router>

      <ToastContainer
        position="top-right"
        autoClose={4000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
    </div>
  );
}

export default App;
Admin.js


import React from 'react'
import { CDBSidebar, CDBSidebarContent, CDBSidebarHeader, CDBSidebarFooter, CDBSidebarMenu, CDBSidebarMenuItem } from "cdbreact"
import { NavLink} from 'react-router-dom';
import "./AllStyle.css"

const Admin = () => {
 
  return (
    <div>
      <div style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}>
        <CDBSidebar textColer="#fff" backgroundColor="rgb(0,7,61)">
          <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
            <h4>Admin</h4>
          </CDBSidebarHeader>
          <CDBSidebarContent className="sidebar-content">
            <CDBSidebarMenu>
              <NavLink  to="/user">
                <CDBSidebarMenuItem icon="portrait">
                  ALL USER
                </CDBSidebarMenuItem>
                <hr></hr>
              </NavLink>
              <NavLink  to="/">
                <CDBSidebarMenuItem icon="file-contract">
                  Add Project
                </CDBSidebarMenuItem>
                <hr></hr>
              </NavLink>
              <NavLink  to="/login">
                <CDBSidebarMenuItem icon="sign-out-alt">
                  Logout
                </CDBSidebarMenuItem>
                <hr></hr>
              </NavLink>
            </CDBSidebarMenu>
          </CDBSidebarContent>
          <hr></hr>
          <CDBSidebarFooter style={{ textAlign: 'center' }}>
            <div className="sidebar-btn-wrapper" style={{ padding: '20px 5px' }}>
              Evalue Content portal
            </div>
          </CDBSidebarFooter>
        </CDBSidebar>
      </div>
    </div>
  )
}

export default Admin

If anyone knows how to fix this please let me know