How to define route as a prop to a component | yew-route

351 views Asked by At

I have the following routes defined.

#[derive(Routable, PartialEq, Debug, Clone)]
pub enum Route {
    #[at("/")]
    Index,

    #[at("about")]
    About,

    #[at("/contact")]
    Contact,

    #[at("/portfolio")]
    Portfolio,

    #[at("*")]
    NotFound,
}

I want to pass a route, Route::Index for instance to the following component but has an error as shown in the comment

#[derive(Properties, PartialEq)]
pub struct IconProps {
    pub route: Route,
    pub alt: String,
    pub icon_name: String,
}

#[function_component(Icon)]
pub fn icon(props: &IconProps) -> Html {
    let src = format!("assets/icons/{}.svg", props.icon_name);

    html! {
        <div class={classes!("p-2", "mx-2", "my-1", "bg-green-100", "inline-block")}>
            <Link<Route> classes={classes!("w-10", "h-10")} to={props.route}>
                                                               ^^^^^^^^^^^^^^
// Diagnostics:
// 1. cannot move out of `props.route` which is behind a shared reference
//   move occurs because `props.route` has type `Route`, which does not implement the `Copy` trait

                <img
                    src={src}
                    alt={props.alt.to_owned()}
                    class={classes!("w-10", "h-10")}
                />
            </Link<Route>>
        </div>
    }
}

So, how to take the route as a prop?

1

There are 1 answers

0
s1n7ax On BEST ANSWER

Well, the solution was somewhat obvious I guess. Just add Copy trait to enum

#[derive(Routable, PartialEq, Debug, Clone, Copy)]
pub enum Route {
    #[at("/")]
    Index,

    #[at("about")]
    About,

    #[at("/contact")]
    Contact,

    #[at("/portfolio")]
    Portfolio,

    #[at("*")]
    NotFound,
}