我有一个管理 Jmeter 板，你可以check to hear
我想，如果管理员在用户点击（你可以在屏幕截图中看到），那么它将呈现用户页面和其他页面，我试图实现嵌套路由，但不工作，请如果有人可以帮助它将不胜感激
如果有人知道如何渲染子组件并在App.js中实现它们，请告诉我
Admin.js

import React from 'react'
import { useState } from "react";
import  "../AllStyle.css";
import {FaHouseUser, FaTasks, FaUser, FaBars} from "react-icons/fa"
import { NavLink } from 'react-router-dom'
import { AnimatePresence, motion } from "framer-motion";
import SidebarMenu from './SidebarMenu'

const routes = [
  {
  path: "/user",
  name: "Users",
  icon: <FaHouseUser />,
  },
  {
    path: "/project",
    name: "Project",
    icon: <FaTasks />,
    },
    {
      path: "/login",
      name: "Logout",
      icon: <FaUser />,
    },
];

const Admin = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);
  const showAnimation = {
    hidden: {
      width: 0,
      opacity: 0,
      transition: {
        duration: 0.5,
      },
    },
    show: {
      opacity: 1,
      width: "auto",
      transition: {
        duration: 0.5,
      },
    },
  };

  return (
    <>
      <div className="main-container">
        <motion.div
          animate={{
            width: isOpen ? "200px" : "45px",

            transition: {
              duration: 0.5,
              type: "spring",
              damping: 10,
            },
          }}
          className={`sidebar `}
        >
          <div className="top_section">
            <AnimatePresence>
              {isOpen && (
                <motion.h1
                  variants={showAnimation}
                  initial="hidden"
                  animate="show"
                  exit="hidden"
                  className="logo"
                >
                  Evalue portal
                </motion.h1>
              )}
            </AnimatePresence>

            <div className="bars">
              <FaBars onClick={toggle} />
            </div>
          </div>
          <section className="routes">
            {routes.map((route, index) => {
              if (route.subRoutes) {
                return (
                  <SidebarMenu
                    setIsOpen={setIsOpen}
                    route={route}
                    showAnimation={showAnimation}
                    isOpen={isOpen}
                  />
                );
              }

              return (
                <NavLink
                  to={route.path}
                  key={index}
                  className="link"
                  // activeClassName="active"
                >
                  <div className="icon">{route.icon}</div>
                  <AnimatePresence>
                    {isOpen && (
                      <motion.div
                        variants={showAnimation}
                        initial="hidden"
                        animate="show"
                        exit="hidden"
                        className="link_text"
                      >
                        {route.name}
                      </motion.div>
                    )}
                  </AnimatePresence>
                </NavLink>
              );
            })}
          </section>
        </motion.div>

        <main>{children}</main>
      </div>
    </>
  );
};

export default Admin

字符串
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/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 User from './components/dashboard/admin/pages/User'
import Project from './components/dashboard/admin/pages/Project'

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/>} />
    </Routes>
    </Router>

    {/* admin routes*/}
      <Router>
        {/* <Admin>  For the admin children route to render children*/}
        <Routes>
        <Route  path="/user" element={<User />} />
        <Route  path="/project" element={<Project />} />
          </Routes>
          {/* </Admin> */}
      </Router>
    <ToastContainer
    position="top-right"
    autoClose={4000}
    hideProgressBar={false}
    newestOnTop={false}
    closeOnClick
    rtl={false}
    pauseOnFocusLoss
    draggable
    pauseOnHover
    />
    </div>
  );
}

export default App;

型