no method named class

[michaelgill1969]

I am trying to add an indication that a link is active in a navbar. When trying to edit the class method, I get the following error:

no method named class found for struct yew_router::components::LinkPropsBuilder in the current scope

My code, which works fine without the class method, is as follows:

use crate::components::router::Route;
use yew::prelude::*;
use yew_router::prelude::*;

#[function_component(Navbar)]
pub fn navbar() -> Html {
    let current_route: Route = use_route().unwrap();

    html! {
        <>
            <BrowserRouter>
                <nav class="navbar navbar-expand">
                    <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
                        <ul class="nav navbar-nav justify-content-center">
                            <li class="nav-item">
                                <div class="nav-link">
                                    <Link<Route> to={ Route::Home } class={ if current_route == Route::Home { "active" } else { "" } }>{ "WELCOME" }</Link<Route>>
                                </div>
                            </li>
                            <li class="nav-item">
                                <div class="nav-link">
                                    <Link<Route> to={ Route::News } class={ if current_route == Route::News { "active" }       else { "" } }>{ "NEWS" }</Link<Route>>
                                </div>
                            </li>
                            <li class="nav-item">
                                <div class="nav-link">
                                    <Link<Route> to={ Route::Information } class={ if current_route == Route::Information { "active" }       else { "" } }>{ "INFORMATION" }</Link<Route>>
                                </div>
                            </li>
                            <li class="nav-item">
                                <div class="nav-link">
                                    <Link<Route> to={ Route::Schedule } class={ if current_route == Route::Schedule { "active" }       else { "" } }>{ "MEETING SCHEDULE" }</Link<Route>>
                                </div>
                            </li>
                        </ul>
                    </div>
                </nav>
            </BrowserRouter>
        </>
    }
}

[Charlie284]

Link does not have a class prop. Its prop is named classes (plural) and has type Classes, so the generated properties builder has a classes(...) method but no class(...) method.

There is also a router-context issue in the example: use_route() runs while Navbar is rendering, before the <BrowserRouter> returned by Navbar exists. Put the router above the component (or remove the inner one if the app already has a router):

#[function_component(App)]
fn app() -> Html {
    html! {
        <BrowserRouter>
            <Navbar />
            // <Switch<Route> render={switch} />
        </BrowserRouter>
    }
}

#[function_component(Navbar)]
pub fn navbar() -> Html {
    let current_route = use_route::<Route>();

    let link_classes = |route: &Route| {
        classes!(
            "nav-link",
            (current_route.as_ref() == Some(route)).then_some("active")
        )
    };

    html! {
        <nav class="navbar navbar-expand">
            <ul class="nav navbar-nav justify-content-center">
                <li class="nav-item">
                    <Link<Route>
                        to={Route::Home}
                        classes={link_classes(&Route::Home)}
                    >
                        { "WELCOME" }
                    </Link<Route>>
                </li>
                <li class="nav-item">
                    <Link<Route>
                        to={Route::News}
                        classes={link_classes(&Route::News)}
                    >
                        { "NEWS" }
                    </Link<Route>>
                </li>
            </ul>
        </nav>
    }
}

Using Option<Route> instead of immediately unwrapping also avoids a panic when the current URL does not match a route. Repeat the same classes={link_classes(...)} pattern for the remaining links.

The relevant source is LinkProps, and use_route gets its navigator and location from router context.