我是react的新手，我想私下展示我的管理仪表板，但只显示第一条路由的工作，没有显示另一条路由的组件.这是我的代码:

<Routes>
      <Route path="/admin" element={<PrivateLayout />}>
        <Route path="/dashboard" exact element={<Dashboard />} />
      </Route>

      <Route exact path='/' element={<MainLayouts />}>
        <Route  path="/" element={<Course />} />
        <Route  path="/login" element={<Login />} />
        <Route  path="/register" element={<Register />} />
        <Route  path="/course/:id" element={<SingleCourse />} />
        <Route  path="/archive" element={<Archive />} />
        <Route  path="/logout" element={<Logout />} />
        <Route  path="*"  element={<NotFound />} />
      </Route>

    </Routes>

在"/dashboard"路径中显示PrivateLayout，在"/"路径中显示MainLayout，并登录、注册...不要走自己的路.

主要布局代码还有:

import React, { Fragment } from "react";
import Header from "./../common/headers";
import TopNav from "./../Navs/TopNav";
import MainNav from "./../Navs/MainNav";
import Footer from './../common/Footers';
import { useLocation } from 'react-router';

const MainLayouts = ({children}) => {
  
  const location = useLocation()
  
  return (
    <Fragment>
      <div className="landing-layer">
        <div className="container">
          <TopNav />
          {location.pathname === "/" ? <Header /> : null}
        </div>
      </div>

      <MainNav />

      <main id="home-page">
              <div className="container">{children}</div>
      </main>

      <Footer/>
 
    </Fragment>
  );
};

export default MainLayouts;

而私有布局代码是:

import React from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import Helmet from "react-helmet";
import AdminTopNav from "../admin/AdminTopNav";
import AdminSidebar from "../admin/AdminSidebar";

const PrivateLayout = ({ children }) => {
    const user = useSelector((state) => state.user);
    return (
        <div id="wrapper">
            <Helmet>
                <title> dashboard </title>
            </Helmet>
            <nav
                className="navbar navbar-inverse navbar-fixed-top"
                role="navigation"
            >
                <div className="navbar-header">
                    <Link className="navbar-brand" to="/dashboard">
                        admin dashboard
                    </Link>
                </div>

                <AdminTopNav user={user} />

                <AdminSidebar />
            </nav>
            <div id="page-wrapper">{children}</div>
        </div>
    );
};

export default PrivateLayout;