passing pageContext prop from another page to layout about gatsby-plugin-breadcrumb HOT 17 CLOSED

You should only have to pass the crumbs from the page, to your Layout component and use/pass them to the <SitemapCrumbs> component. I could be confused though, feel free to share some code here or in a sandbox and I will take a look.

from gatsby-plugin-breadcrumb.

Even if I pass only crumbs from the page to layout I get this error:

By the way reading the documentation I saw this const being declared so I tried including it but with no success:

    const {
      breadcrumb: { crumbs },
    } = pageContext;

I am passing two props: crumbs and pageContext from the page to the layout.

from gatsby-plugin-breadcrumb.

What are you passing to SitemapCrumbs component in your Layout component?

    const {
      breadcrumb: { crumbs },
    } = pageContext;

This is just defining the crumbs variable from pageContext.

From the error you are not passing the array of crumbs to the SitemapCrumbs component. Best guess without seeing your code anyway?

from gatsby-plugin-breadcrumb.

This is what I am passing to the layout:

<Layout data={data} location={location} crumbLabel={data.contact.slug} crumbs={['Home', 'Contact']} pageContext={breadcrumbs: ['Home', 'Contact']} >

if I don't pass pageContext I get the error cannot read breadcrumb of undefined.
I am probably just missing out something very easy but I cannot understand what :)

from gatsby-plugin-breadcrumb.

hmm and does <Layout /> component have <SitemapCrumbs /> component in it somewhere? Not sure what that crumbs prop is, or the pageContext prop? Can I look at this project on GH somewhere, or is it private?

from gatsby-plugin-breadcrumb.

unfortunately it is private, but I paste here the props that I have on the layout.js

const { pageContext, crumbLabel, crumbs } = this.props

and then I use the component like this:

<SitemapCrumbs crumbs={crumbs} crumbSeparator=" - " />

from gatsby-plugin-breadcrumb.

Looking at the docs this might be an issue with the examples?

Assuming your <Layout /> component is on a gatsby page, try the following.

On Gatsby Page:

export const AboutUsPage = ({pageContext}) => {
   
    const {
      breadcrumb: { crumbs },
    } = pageContext;

return (
  <div>
      <Layouts crumbs={crumbs} /* whatever else you may need to pass />
       ..... 
  </div>
)

Then in Layouts Component use SitemapCrumbs component like:

export const Layout = ({crumbs}) => {
  return (
    <div>
      <Header>
        <main>
          <SitemapCrumbs crumbs={crumbs} />
          ...
        </main>
      </Header>
    </div>
  }
}

At the minimum this should be all you need for SitemapCrumbs to work.

from gatsby-plugin-breadcrumb.

Any luck @matteomanzo ?

from gatsby-plugin-breadcrumb.

Sorry @sbardian, I didn't manage to work on the project as I was on holiday, I'll have a look now

from gatsby-plugin-breadcrumb.

No luck, now in the contact page I have:

const { data, location, pageContext } = this.props
const {
  breadcrumb: { crumbs },
} = pageContext;

and

      <Layout data={data} location={location} crumbs={crumbs} >

And in the Layout I have:

  <SitemapCrumbs crumbs={this.props.crumbs} crumbSeparator=" - " />

But I still get the error:

from gatsby-plugin-breadcrumb.

Strange. I would console log your crumbs on the page and see if you are getting anything, or try to use SitemapCrumbs on the page using crumbs. My guess is your not getting any crumbs from pageContext.

from gatsby-plugin-breadcrumb.

Let me know what you get. I have a project I think I can edit to match what you are trying to do.

from gatsby-plugin-breadcrumb.

I was able to test this tonight. Seems to work fine for me. Some ideas even though you may already have them in place:

• Confirm your sitemap xml file is being created in the public folder
• The pages you are using pageContext on are gatsby pages in the pages folder.
• On the gatsby page where you use pageContext to pull out your crumbs console log pageContext and confirm a similar structure:

pageContext {​
   breadcrumb {
​​      crumbs [
​​​         { pathname: "/", crumbLabel: "Home" },
​​​         { pathname: "/test", crumbLabel: "test" }
​​      ]
    }
  }

from gatsby-plugin-breadcrumb.

@matteomanzo any luck? If you are able to share anything with me I'm willing to look at it.

from gatsby-plugin-breadcrumb.

@matteomanzo going to close this one. Feel free to open another if you are still having trouble.

from gatsby-plugin-breadcrumb.

I am running into same problem using autoGen,
Here is the gatsby_config.js definition:
{
resolve: gatsby-plugin-breadcrumb,
options: {
useAutoGen: true,
autoGenHomeLabel: Home,
},

here is the application on the page, in this case index.js (src/pages/index.js):

export default ({ pageContext }) => {

const { breadcrumb: { crumbs } } = pageContext

return (

but i run into the same error : TypeError: Cannot read property 'crumbs' of undefined
Any help is much appreciated.

PD: I tried the plugin in click tracking mode and worked fine.

from gatsby-plugin-breadcrumb.

@unilimpio what are you getting when you console.log pageContext on the page? Some of the conversation above is out of date and won't apply, as some of those components/etc have been deprecated. FYI.

from gatsby-plugin-breadcrumb.