Wie integriere ich den PageContainer von MUI ToolPad in eine benutzerdefinierte Seitenleiste? ⇐ JavaScript

[Anonymous]

Material UI hat eine Komponente namens PageContainer, die hier einen Titel und eine Brotkrumb-Navigation liefert, wie hier gezeigt:
https://mui.com/toolpad/core/react-page-container/
möchte mit einem Sidebar-Komponenten mithilfe eines Sidebar-Brotes so navigieren. Ich habe Probleme, sie zu integrieren. Wenn ich auf ein Breadcrumb klicke, möchte ich zur ausgewählten Seite navigieren und das Sidebar -Update und umgekehrt. Die Seitenleiste verwendet React Router: < /p>

Code: Select all

function App() {
return (









);
< /code>
Während die Breadcrumbs einen React.memo () mit einer Navigationstufe verwenden. < /p>
    const NAVIGATION: Navigation = [
{ segment: "home", title: "Home" },
{ segment: "home/about-us", title: "About Us" },
{ segment: "home/services", title: "Services" },
{ segment: "home/events", title: "Events" },
];

function PageContainerBasic(props: any) {
const { window } = props;
const router = useDemoRouter("/home/events");
const theme = useTheme();
const demoWindow = window ? window() : undefined;

function useDemoRouter(path: string): Router {
const [pathname, setPathname] = React.useState(path);

const router = React.useMemo(() => {
return {
pathname,
navigate: (path: string | URL) => setPathname(String(path)),
};
}, [pathname]);

return router;
}

function DemoPageContent({ pathname }: { pathname: string }) {
return (



);
}

return (







);
}

Aber ich kann nicht herausfinden, wie man sie integriert.>