了解具有正确路由的 React Outlet

import react from "react";

// import components
import allroutes from "./routes";

// component
const app = () => {
  return (
    <>

      <allroutes />
    </>
  );
};
export default app;

// import packages

import { browserrouter, outlet, route, routes } from "react-router-dom";
import react, { suspense, lazy } from "react";
import {
  dashboard,
  homepath,
  loginpath,
  rootpath
} from "./routepaths";

import loader from "../components/loader";
import protectedroute from "./protectedroute";

// import route paths

const logincomponent = lazy(() => import("../pages/login"));
const homecomponent = lazy(() => import("../pages/home"));
const routenotfoundcomponent = lazy(() => import("../pages/pagenotfound"));

const dashboardcomponent = lazy(() => import("../pages/dashboard/"));

const allroutescomponent = () => {
  return (
    <suspense fallback={<loader />}>
      <browserrouter>
        <routes>
          <route path={rootpath} element={<outlet />}>
            <route index element={<logincomponent />} />
            <route path={loginpath} element={<logincomponent />} />
            <route element={<protectedroute />}>
              <route path={homepath} element={<homecomponent />} />
              <route path={dashboard} element={<dashboardcomponent />} />
            </route>
            <route path="*" element={<routenotfoundcomponent />} />
          </route>
        </routes>
      </browserrouter>
    </suspense>
  );
};

export default allroutescomponent;

// import packages
import react, { useeffect } from "react";
import { usenavigate, outlet } from "react-router-dom";

import baselayout from "../pages/layout";

// import route paths
import { rootpath } from "./routepaths";

// component
const protectedroute = () => {
  const navigate = usenavigate();();
  const isauthenticated = false; //add a dynamic method call
  const user = 'shruti';//add a dynamic method call

  useeffect(() => {
    if (!isauthenticated) {
      return navigate(rootpath, { replace: true });
    }
  }, [isauthenticated, navigate]);

  return (
    <baselayout >
      <outlet />
    </baselayout>
  );
};

export default protectedroute;

import React, { lazy } from "react";

import ErrorBoundary from "../../components/error-boundary";

// const Header = lazy(() => import("@components/header"));
const Sidebar = lazy(() => import("../../components/sidebar"));
export default function BaseLayout(props) {
  const { children } = props;
  // common things we need to show on each page like Header,sidebar ,Footer
  return (
    <ErrorBoundary>
      <div className="wrapper">
        <div className="d-flex position-relative">
          <Sidebar />
          <main className="main-container">
            {/* <Header /> */}
            {children}//components from all routes
          </main>
        </div>
      </div>
    </ErrorBoundary>
  );
}

BaseLayout.defaultProps = {
  children: [],
  user: {},