Render element in header conditionally on active Link component

[wad-im]

Hello,

I am a total beginner with Gatsby and more or less in coding. In a project, I would like to make use of the Link component in the header component displaying whether it is active or not. I generally figured how to style the Link component using activeClassName, but I'd like to render a styled line as a div underneath the Link component based on whether Link is active or not. Now, I cannot wrap my head around how to conditionally do that. I thought I might

• check if Link is active, and then render the div. How would I do that? or;
• check the location, and render if Link "to" and the location match, but did not quite figure this one out.

I'd appreciate it if anyone could point me in the right direction.

Thank you,
Much appreciated.
W.

[herecydev]

The latter is probably more idiomatic with react. What did you try? It should be as straightforward as you outlined.

[wad-im]

Figured the latter out. I checked the location on each page component, passed it to the layout, and from there to the header. It worked. It seems just somehow inelegantly solved, so I was wondering whether others do it differently.
Thanks, herecydev.

[herecydev]

Just so I'm clear when you refer to "active" are you saying the link is clickable, or you are "on that page" the link points to?

[wad-im]

I meant that I am on that page the link points to

[herecydev]

Then, I think what you've done is the simplest. There's no way to do this purely in CSS because you need to have an understanding of the current page.

[wad-im]

Thank you.