Add component with if

[twilit badger]

I have my service pages as a collection in my system. That is, I create the content of my service pages with my mdx files. And as you know, we have a .astro file to use mdx content. I also have a sidebar here.

For example, if I am on the SEO-service service, I want to put a different sidebar on this sidebar. If I am on the Google-Ads-service service, I want to put a different sidebar on it.

How can I create an if about this?

In my component, I will call a plain .astro file, not a react component etc., and it will contain sidebar HTML codes specific to each service.

This is the code I want

if (if seo service page) {
<SeoService/>
}

can you write this code? I don't know if we can do it using astro path or how, thank you.

[tribal terrace]

I believe you need to use getStaticPaths

https://docs.astro.build/en/reference/api-reference/#getstaticpaths

[edgy sky]

Astro uses JSX expressions, so you would write:

{ condition && (
    <SeoService/>
)}

[tribal terrace]

I thought this is what was being asked initially too

But on further review I think they are trying to access the route parameters and then conditionally render based on which route they are at

Meaning the question is how to access the route parameters, I think 🤔

[edgy sky]

Well... in that case, you just change the "condition", to something like:

{ Astro.url.pathname === "/service" && (
    <SeoService/>
)}

[tribal terrace]

Ah there it is

Astro.url.pathname was my missing link, ty Henri

[twilit badger]

THANK YOU GUYS