如何将MUI Toolpad的PageContainer与自定义Sidebar集成并实现双向导航同步？

我完全懂你现在的困扰——一边是MUI Toolpad PageContainer自带的面包屑导航，一边是自己用React Router搭的侧边栏，俩组件各玩各的导航逻辑，点面包屑侧边栏没反应，点侧边栏面包屑也不跟着变，确实让人头大。

问题核心 #

你现在的问题根源在于两个导航组件用了完全独立的路由状态：

• 你的Sidebar依赖React Router的全局路由上下文，路径变化由React Router管理；
• 但PageContainer的面包屑用的是自己封装的useDemoRouter，内部维护了一套独立的pathname状态，和React Router完全脱节。

两边状态不互通，自然做不到双向同步。咱们只要把它们的路由逻辑统一到React Router上，问题就迎刃而解了。

具体解决方案 #

1. 抛弃自定义路由，改用React Router的实例

删掉你自己写的useDemoRouter函数，让PageContainer的面包屑也依赖React Router的路由状态。修改PageContainerBasic组件：

// 先导入React Router的必要hooks
import { useLocation, useNavigate } from 'react-router-dom';

function PageContainerBasic(props: any) {
  const { window } = props;
  const theme = useTheme();
  const demoWindow = window ? window() : undefined;

  // 用React Router的hooks获取当前路径和导航方法
  const location = useLocation();
  const navigate = useNavigate();

  // 把React Router的方法适配成AppProvider需要的router格式
  const router = React.useMemo(() => ({
    pathname: location.pathname,
    navigate: (path: string | URL) => navigate(String(path)),
  }), [location.pathname, navigate]);

  function DemoPageContent({ pathname }: { pathname: string }) {
    return (
      <Box>
        <Sidebar />
      </Box>
    );
  }

  return (
    <AppProvider
      navigation={NAVIGATION}
      router={router} // 传入适配后的React Router实例
      theme={theme}
      window={demoWindow}
    >
      <Paper sx={{ p: 2, width: "100%" }}>
        <PageContainer
          slots={{
            header: CustomPageHeader,
          }}
        >
          <DemoPageContent pathname={router.pathname} />
        </PageContainer>
      </Paper>
    </AppProvider>
  );
}

2. 确保Sidebar的导航逻辑正确

你的Sidebar已经在用React Router了，只要确保侧边栏的链接路径和NAVIGATION里的segment完全匹配就行。比如侧边栏用NavLink组件来实现跳转：

import { NavLink } from 'react-router-dom';

function Sidebar() {
  return (
    <div>
      <NavLink to="/home" style={({ isActive }) => ({ color: isActive ? 'blue' : 'black' })}>
        Home
      </NavLink>
      <NavLink to="/home/about-us" style={({ isActive }) => ({ color: isActive ? 'blue' : 'black' })}>
        About Us
      </NavLink>
      <NavLink to="/home/services" style={({ isActive }) => ({ color: isActive ? 'blue' : 'black' })}>
        Services
      </NavLink>
      <NavLink to="/home/events" style={({ isActive }) => ({ color: isActive ? 'blue' : 'black' })}>
        Events
      </NavLink>
    </div>
  );
}

为什么这样能解决问题？ #

现在两边的导航都依赖同一个React Router的路由状态：

• 点击面包屑时，PageContainer会调用React Router的navigate方法，触发路径变化，Sidebar的NavLink会自动感知到当前路径，更新高亮状态；
• 点击Sidebar的链接时，React Router更新路径，useLocation会同步最新的pathname给PageContainer的面包屑，面包屑也会自动更新对应的层级。

最后记得检查一下NAVIGATION里的segment值和React Router的Route path完全一致，比如都是/home、/home/about-us这种格式，不要出现路径不匹配的情况。

备注：内容来源于stack exchange，提问作者user3217883