React MUI Toolpad中useActivePage()返回null的问题求助

我现在需要为每个页面的PageContainer添加专属的slot，所以得先获取当前页面的标题。我参考了MUI Toolpad官方文档里关于PageContainer组件动态路由的示例代码：

export default function Example() {
  const params = useParams<{ id: string }>();
  const activePage = useActivePage();
  invariant(activePage, 'No navigation match');

  const title = `Item ${params.id}`;
  const path = `${activePage.path}/${params.id}`;

  const breadcrumbs = [...activePage.breadcrumbs, { title, path }];

  return (
    <PageContainer title={title} breadcrumbs={breadcrumbs}>
      ...
    </PageContainer>
  );
}

但当我照着类似的思路写代码时，useActivePage()却一直返回null，具体代码如下：

const activePage = useActivePage();     // 返回null
console.log("Nav: activePage=", activePage);   
invariant(activePage, 'No navigation match');
const path = activePage ? `${activePage.path}` : '';   // 返回空字符串
console.log("Nav: path=", path);  

return (
  <ReactRouterAppProvider
    navigation={NAVIGATION}
    branding={BRANDING}
  >
    <DashboardLayout>
      <PageContainer>
        <Outlet />
      </PageContainer>
    </DashboardLayout>    
  </ReactRouterAppProvider>
)

运行后控制台打印的activePage是null，path是空字符串，invariant直接抛出了"No navigation match"的错误。有没有同学遇到过类似的问题？或者能帮我排查下哪里出错了吗？

可能的解决方案 #

我注意到你的代码里useActivePage()是在ReactRouterAppProvider的外部调用的，这很可能是问题的核心：

useActivePage是依赖于ReactRouterAppProvider提供的上下文的钩子，必须在ReactRouterAppProvider包裹的组件内部使用才能获取到有效值。如果在Provider外部调用，它无法访问对应的上下文，自然会返回null。

你可以调整代码结构，把useActivePage的调用移到Provider内部的组件中：

// 抽离内部内容组件
const DashboardContent = () => {
  const activePage = useActivePage();
  console.log("Nav: activePage=", activePage);   
  invariant(activePage, 'No navigation match');
  const path = activePage ? `${activePage.path}` : '';
  console.log("Nav: path=", path);  

  return (
    <DashboardLayout>
      <PageContainer title={activePage?.title}>
        <Outlet />
      </PageContainer>
    </DashboardLayout>
  );
};

export default function YourApp() {
  return (
    <ReactRouterAppProvider
      navigation={NAVIGATION}
      branding={BRANDING}
    >
      <DashboardContent />
    </ReactRouterAppProvider>
  );
}

另外也可以同步检查这几点：

• 确认NAVIGATION配置的路由结构是否正确，是否包含当前页面的路由定义
• 确保组件是通过MUI Toolpad的路由系统渲染，而非手动直接挂载
• 排查是否有其他上下文提供者干扰了ReactRouterAppProvider的上下文传递

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