Help with Nested Routes in Remix for Shopify App

[ahmedrizwan239]

Hi everyone,

I'm currently developing a Shopify App using Remix. So far, I've successfully implemented flat routes, but now I’d like to introduce a child route (or even a sub-child route) that maintains the active state in the navigation when accessed.

My goal is to have the same page appear as active, even when navigating to its child route.

I've attached a screenshot and a code snippet for better clarity. I'd appreciate it if you could take a look and share your thoughts or suggestions.

Thanks in advance!

<NavMenu> <Link to={ROUTES.HOME} rel="home">{t("navigation.home")}</Link> <Link to={ROUTES.CATALOG}>{t("navigation.catalog")}</Link> <Link to={ROUTES.CATALOG2}>{t("navigation.catalog2")}</Link> {/* TODO: make this subchild of catalog */} <Link to={ROUTES.PRODUCTS}>{t("navigation.products")}</Link> <Link to={ROUTES.ORDERS}>{t("navigation.orders")}</Link> <Link to={ROUTES.STATISTICS}>{t("navigation.statistics")}</Link> <Link to={ROUTES.SETTINGS}>{t("navigation.settings")}</Link> </NavMenu>

I want the Catalog to be active when I'm on Catalog2, or even show it as a sub-child would work.