Active class if target URL/route is within the current URL

[tirithen]

I'm trying to create a navigation component that takes a Vec of routes and renders them. I need an active class to be set on the navigation option that matches the current URL.

As the routes in some cases will have children I ALSO need the active class to be set WHEN the current URL (ex. /blog/my-blog-post) is a child of the parent URL (ex. /blog/).

Currently when setting the active_class property on a Link component this only works when the user is on /blog/, but the class is removed when the user goes to the sub URL /blog/my-blog-post.

There was already an issue reported on this here #1241 , and that was closed with a route.is_child_of(&parent), but without any addition like a active_within_route: true option for the Link component. I personally think that the active_within_route: true option was a great idea that would have been useful for these cases.

What would be a good way of implementing this functionality in my navigation component with the currently existing API?

This is my current navigation component:

use dioxus::prelude::*;
use dioxus_router::prelude::*;

#[component]
pub fn Navigation<Route: Routable + PartialEq>(links: Vec<(Route, String)>) -> Element {
    rsx! {
        nav {
            class: "navigation section",
            ul {
                for link in links {
                    li {
                        Link {
                            class: "button quiet",
                            active_class: "active",
                            to: link.0.clone(),
                            {link.1}
                        }
                    }
                }
            }
        }
    }
}

[tirithen]

I found the way to use is_child_of now, I'll put the answer here in case someone else has the same problem.

It still feels though like a more ergonomic field on the Link component would be a useful addition?

use dioxus::prelude::*;
use dioxus_router::prelude::*;

#[component]
pub fn Navigation<Route: Routable + PartialEq>(links: Vec<(Route, String)>) -> Element {
    let current_route = use_route::<Route>();

    rsx! {
        nav {
            class: "navigation section",
            ul {
                for link in links {
                    li {
                        Link {
                            class: if link.0 == current_route || link.0.is_child_of(&current_route) { "button quiet active" } else { "button quiet" },
                            to: link.0.clone(),
                            {link.1}
                        }
                    }
                }
            }
        }
    }
}