Reset bread crumb state functionality

[martinshhh]

I currently have an issue with the breadcrumbs default crumb.
So let's imagine that our default crumb is this one /writtens.

Inside "writtens" we have our posts, so for example: /writtens/a-funny-post.
Writtens page is also on my navbar, so I have a that navigates to it.

So this is the behaviour:
If I go to Writtens page and then go to writtens/a-funny-post it will create the expected breadcrumb, so Writtens/A Funny Post.
But if I now navigate to Writtens from the navbar the breadcrumbs will become Writtens/A Funny Post/Writtens. That's the first problem.

The second one is if I navigate to "A Funny Post" and then navigate to "Writtens" from the breadcrumb and then navigate to a different post for example "A Mean Post" my breadcrumbs will become Writtens/A Funny Post/A Mean Post.

Is there a way to whenever I navigate to /writtens to clear/reset the breadcrumbs?

Thanks!

[sbardian]

hey @dvlprmartins
I have updated the demo to use a default breadcrumb (https://codesandbox.io/s/50o4zwm91l). For your first issue it seems to work for me. Have a sandbox or something you could share? Only thing I can think of is it might be something wrong with the way the default crumb was structured in your gatsby-config.js?

The second issue seems to work in the demo as well. So either I have a bug that isn't showing itself in the demo, a sandbox would be helpful on tracking this down, or there maybe something wrong in your default crumb structure?

Thanks!

[martinshhh]

Hello @sbardian
Thanks for your reply. I'll make a sandbox so I can share with you after I get off of work.
But yes It might be something wrong with my configuration, I'm also getting a navigation warning whenever I use a breadcrumb link.
I'll update this when I create the sandbox.
Thank you very much!

[martinshhh]

@sbardian I probably didn't explain my self very well.
I was able to reproduce my problem on the demo you provided.

If you go to Page 2 and refresh the page the breadcrumb will start on the Page 2.
If you go to the home page it will change to Page 2/Home.

Isn't it possible to always keep the same structure Home -> Page 2 or Page 3, no matter where you reloaded your website?

[sbardian]

I see it now! Yes this is not the expected behavior. I will look into this today!

[martinshhh]

@sbardian Awesome! Thanks for that!
If you need anything let me know!

[sbardian]

@dvlprmartins actually. It may have just been that the sandbox didn't have the latest version of gatsby-plugin-breadcrumb installed. I have updated it and I think it is behaving as it should now/as expected?
https://codesandbox.io/s/50o4zwm91l

Let me know, are you on the latest release?

[martinshhh]

@sbardian Yes I'm on the latest release and It's still happening.
Already tried using the component on every single page that I have and tried the layout method, the behaviour is the same.

[sbardian]

Hmm. We'll check out the demo, is it working as you expect now? Otherwise maybe share the sandbox and I'll dig deeper. Thanks

[sbardian]

Here is the demo that i think is working how we would expect. I had an error, but seems correct now.

https://codesandbox.io/s/50o4zwm91l

[martinshhh]

Here is the demo that i think is working how we would expect. I had an error, but seems correct now.

https://codesandbox.io/s/50o4zwm91l

Indeed that demo works as expected!

Here's my sandbox https://codesandbox.io/s/github/dvlprmartins/dvlprmartins

Thanks for your help btw!

[sbardian]

Thanks. I will dig into this tonight!

[sbardian]

@dvlprmartins

I made a fork of your sandbox (https://codesandbox.io/s/pedro-martins-313ju). Seems there were a couple issues. One was most likely my fault. In the gatsby.config.js you had the same mistake I made updating my sandbox example to use a default crumb.

Double nested options properties.

    {
      resolve: `gatsby-plugin-breadcrumb`,
      options: {         // no need for one of these. . . doh! my bad
        options: {
          defaultCrumb: {
            location: {
              state: { crumbClicked: false },
              pathname: "/",
            },
            crumbLabel: "Home",
            crumbSeparator: " / ",
          },
        },
      },
    },

The second change I made was how you were using the Breadcrumb component in /components/BackgroundComponent.js lines 24-32. No need to assign this to an array here /etc. Take a look at my fork and let me know what you think and if it is working as you expect. Also, if the docs could be more clear let me know or feel free to submit a PR, either way is great!

[martinshhh]

@sbardian Sorry for late reply.
Seems like the problem was actually the double nested properties haha :p
Thank you very much! I actually never noticed those.
Also fixed the array assignment, silly thing from me.
Thanks again.

I think the docs are clear. But anything that I feel that needs to be more clear I'll definitely make a PR. Want to start contributing to this community.

Again thanks!