Material UI has a component called PageContainer which provides a title and breadcrumb navigation as shown here:
https://mui.com/toolpad/core/react-page-container/
I want to navigate to the same place as the MUI Breadcrumbs using a SideBar component. I’m having trouble integrating them. When I click on a breadcrumb, I want to navigate to the selected page, and have the sidebar update, and vice versa.
I think the problem is because each component is using a different way of navigating. The SideBar is using React Router:
function App() {
return (
<Router>
<PageContainerBasic />
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/home/about-us" element={<AboutUs />} />
<Route path="/home/services" element={<Services />} />
<Route path="/home/events" element={<Events />} />
</Routes>
</Router>
);
whereas the Breadcrumbs is using a React.Memo() with a navigate prop.
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 (
<Box>
<Sidebar />
</Box>
);
}
return (
<AppProvider
navigation={NAVIGATION}
router={router}
theme={theme}
window={demoWindow}
>
<Paper sx={{ p: 2, width: "100%" }}>
<PageContainer
slots={{
header: CustomPageHeader,
}}
>
<DemoPageContent pathname={router.pathname} />
</PageContainer>
</Paper>
</AppProvider>
);
}
But I can’t figure out how to integrate them.
I’ve put together a sandbox demo here:
https://codesandbox.io/p/sandbox/sidebar-testing-t2v5zt