javascript - Why does useActivePage() in React MUI Toolpad example return null? - Stack Overflow

admin管理员组

文章数量:1405621

I need to add slots to a PageContainer, specific to each page, so I need to get the title of the page first. I'm following example in MUI Toolpad for dynamic routes in PageContainer component:

/

It looks like this:

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>
  );
}

But when I try to do something similar, like this:

 const activePage = useActivePage();     //returns null
 console.log("Nav: activePage=", activePage);   
 invariant(activePage, 'No navigation match');
 const path = activePage ? `${activePage.path}` : '';   //returns empty string
 console.log("Nav: path=", path);  

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

useActivePage() returns null. Has anybody else run into this issue and got it to work?

I need to add slots to a PageContainer, specific to each page, so I need to get the title of the page first. I'm following example in MUI Toolpad for dynamic routes in PageContainer component:

https://next.mui/toolpad/core/react-page-container/

It looks like this:

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>
  );
}

But when I try to do something similar, like this:

 const activePage = useActivePage();     //returns null
 console.log("Nav: activePage=", activePage);   
 invariant(activePage, 'No navigation match');
 const path = activePage ? `${activePage.path}` : '';   //returns empty string
 console.log("Nav: path=", path);  

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

useActivePage() returns null. Has anybody else run into this issue and got it to work?

• javascript
• reactjs
• material-ui
• toolpad

Share Improve this question Follow asked Mar 24 at 17:24 user3217883user3217883 1,48577 gold badges4848 silver badges8181 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Turns out that useActivePage, a hook, has to be placed in a function outside of the main export default function. Like the example, I created a function called Content() which made the call to useActivePage, like this:

function Content() {

  const activePage = useActivePage();
  console.log("Content: activePage=",activePage);
  invariant(activePage, 'No navigation match');

  return (
    <PageContainer >
    <Outlet />
  </PageContainer>
  );
}

And then implemented it in the main function like:

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

Now it returns the expected output:

Content: activePage= {title: 'Physiology', path: '/home/physiology', breadcrumbs: Array(2)}

I don't know why it only works in a function external to the main function.

本文标签： javascriptWhy does useActivePage() in React MUI Toolpad example return nullStack Overflow