当单击紫杉中的路由链接时，如何添加.IS Active CSS类？

Question

这是一个简单的BULMA CSS NAVBAR yew 。我的问题是如何将.is-Active类添加到“ Navbar-item”中时，请单击路由链接？

看来我必须在这里使用一些状态的用户。但是我无法在路由链接中拦截onclick事件。

use yew::prelude::*;
use yew_router::prelude::*;

use crate::routes::app_routes::AppRoutes;

#[function_component]
pub fn Nav() -> Html {
    let navbar_active = use_state_eq(|| false);

    let toggle_navbar = {
        let navbar_active = navbar_active.clone();

        Callback::from(move |_| {
            navbar_active.set(!*navbar_active);
        })
    };

    let active_class = if !*navbar_active { "is-active" } else { "" };

    html! {
        <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <h1 class="navbar-item is-size-3">{ "UVW" }</h1>

                <button class={classes!("navbar-burger", "burger", active_class)}
                    aria-label="menu" aria-expanded="false"
                    onclick={toggle_navbar}
                >
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class={classes!("navbar-menu", active_class)}>
                <div class="navbar-start">
                    <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::Home}>
                        { "Home" }
                    </Link<AppRoutes>>

                    <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::About}>
                        { "About" }
                    </Link<AppRoutes>>

                    <div class="navbar-item has-dropdown is-hoverable">
                        <div class="navbar-link">
                            { "More" }
                        </div>
                        <div class="navbar-dropdown">
                            <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::Home}>
                                { "DropDown1" }
                            </Link<AppRoutes>>
                            <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::Home}>
                                { "DropDown2" }
                            </Link<AppRoutes>>
                            <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::Home}>
                                { "DropDown3" }
                            </Link<AppRoutes>>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    }
}

Answer 1

我还没有找到任何“官方”方法来做到这一点。但是，一个可能的解决方案是用use_route将其连接到路线上，并与之匹配。

我通过创建自己的FN组件来简化这一点，该组件检查是否是当前路线。

#[derive(Properties, PartialEq)]
pub struct Props {
    pub children: Children,
    pub to: Route,
}
#[function_component(RouteLink)]
fn route_link(props: &Props) -> Html {
    let route = use_route::<Route>().unwrap_or_default();
    let classes = if route == props.to {
        classes!("text-gray-900")
    } else {
        classes!("text-gray-400")
    };

    html! {
        <Link<Route> classes={classes} to={props.to.clone()}>{for props.children.iter() }</Link<Route>>
    }
}