What is the proper way to mark a Link current active page?

[Magicloud]

For example, I have

#[derive(Routable, PartialEq, Clone)]
enum Route {
    #[at("/tagging")]
    Tagging,
    #[at("/new_tag")]
    NewTag,
}

// Somewhere else
<Link<Route> classes={classes!("nav-link")} to={Route::Tagging}>{ "Tagging" }</Link<Route>>

// And
let yew_router::history::AnyLocation::Browser(active_page) = ctx.link().location().unwrap();

So now I have the active_page, but matching it manually (with string manipulation) with Route seems weird. Is there any better way to know the current Link so I can give it an "active" class?

[voidpumpkin]

For function components simply use use_route to get the current route
For struct components its a bit complicated because you need to create a listener that would listen to route changes https://yew.rs/docs/concepts/router#struct-components-1

[Magicloud]

Hum, even ctx.link().location().route() in view (or create as in "router" example) returns None when I directly open the URL. And it panicked as "failed to read history" as well, when I click a Link.

[Magicloud]

Seems like some where unwraped?

Uncaught Error: failed to read history
    __wbindgen_throw http://localhost:8080/index-a569e47560839922.js:668
    __wbg_adapter_24 http://localhost:8080/index-a569e47560839922.js:211
    real http://localhost:8080/index-a569e47560839922.js:197
    __wbg_addEventListener_09e11fbf8b4b719b http://localhost:8080/index-a569e47560839922.js:495
    handleError http://localhost:8080/index-a569e47560839922.js:278
    __wbg_addEventListener_09e11fbf8b4b719b http://localhost:8080/index-a569e47560839922.js:494
    init http://localhost:8080/index-a569e47560839922.js:693
    async* http://localhost:8080/new_tag:19
index-a569e47560839922.js:668:15
    __wbindgen_throw http://localhost:8080/index-a569e47560839922.js:668
    hcbebdf853d39f23c http://localhost:8080/index-a569e47560839922_bg.wasm:1965719
    <core::option::Option<T> as wasm_bindgen::UnwrapThrowExt<T>>::expect_throw::hee2e555650db19ab http://localhost:8080/index-a569e47560839922_bg.wasm:1258810
    <yew_router::components::link::Link<R,Q> as yew::html::component::Component>::update::h5d2b6245d870d33f http://localhost:8080/index-a569e47560839922_bg.wasm:756230
    <yew::html::component::lifecycle::UpdateRunner<COMP> as yew::scheduler::Runnable>::run::h5d0ead2138f9ce7f http://localhost:8080/index-a569e47560839922_bg.wasm:193720
    h777c78a08c5d7d02 http://localhost:8080/index-a569e47560839922_bg.wasm:456508
    h17f446eb5869be99 http://localhost:8080/index-a569e47560839922_bg.wasm:1211302
    h2a66a2816db40211 http://localhost:8080/index-a569e47560839922_bg.wasm:1688865
    he9a570ae3b091fcb http://localhost:8080/index-a569e47560839922_bg.wasm:2089810
    h5c315a704e2a3695 http://localhost:8080/index-a569e47560839922_bg.wasm:1137375
    he958e666c824acce http://localhost:8080/index-a569e47560839922_bg.wasm:1867184
    h03d24710b95ea07f http://localhost:8080/index-a569e47560839922_bg.wasm:1825015
    he6eea332a1f3d1ed http://localhost:8080/index-a569e47560839922_bg.wasm:757789
    <yew::html::listener::events::onclick::Wrapper as yew::virtual_dom::listeners::Listener>::handle::hcc973c11daed7924 http://localhost:8080/index-a569e47560839922_bg.wasm:1909681
    hbf37aa7a40210736 http://localhost:8080/index-a569e47560839922_bg.wasm:312334
    h28673e81ad66e12f http://localhost:8080/index-a569e47560839922_bg.wasm:642766
    h8f83e65277627099 http://localhost:8080/index-a569e47560839922_bg.wasm:1041388
    hac0d9bd8e34032b4 http://localhost:8080/index-a569e47560839922_bg.wasm:1768662
    <dyn core::ops::function::Fn<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h95db75c990a83b8f http://localhost:8080/index-a569e47560839922_bg.wasm:1272248
    __wbg_adapter_24 http://localhost:8080/index-a569e47560839922.js:211
    real http://localhost:8080/index-a569e47560839922.js:197
    (Async: EventListener.handleEvent)
    __wbg_addEventListener_09e11fbf8b4b719b http://localhost:8080/index-a569e47560839922.js:495
    handleError http://localhost:8080/index-a569e47560839922.js:278
    __wbg_addEventListener_09e11fbf8b4b719b http://localhost:8080/index-a569e47560839922.js:494
    h7d06100865168c10 http://localhost:8080/index-a569e47560839922_bg.wasm:845163
    hf4d69cef00322b99 http://localhost:8080/index-a569e47560839922_bg.wasm:660326
    h9431b500d867ec85 http://localhost:8080/index-a569e47560839922_bg.wasm:1083613
    hc0c8f86e4bf7579e http://localhost:8080/index-a569e47560839922_bg.wasm:1511458
    h9d03d7e7b30be5db http://localhost:8080/index-a569e47560839922_bg.wasm:909621
    hea22379df93fa9c3 http://localhost:8080/index-a569e47560839922_bg.wasm:438901
    heb8ad1b895945fd4 http://localhost:8080/index-a569e47560839922_bg.wasm:1638589
    h05aa5274cd171c8f http://localhost:8080/index-a569e47560839922_bg.wasm:1311419
    h5e568d77a73823f2 http://localhost:8080/index-a569e47560839922_bg.wasm:1075846
    h74bcd0563f631b6f http://localhost:8080/index-a569e47560839922_bg.wasm:1488168
    he3fdc3ffc35de08e http://localhost:8080/index-a569e47560839922_bg.wasm:1674057
    h1db5f38dfbd1782b http://localhost:8080/index-a569e47560839922_bg.wasm:1487797
    <yew::virtual_dom::listeners::Listeners as yew::virtual_dom::Apply>::apply::hc702059a1fbb271d http://localhost:8080/index-a569e47560839922_bg.wasm:1135258
    <yew::virtual_dom::vtag::VTag as yew::virtual_dom::VDiff>::apply::hee9cb35682873f21 http://localhost:8080/index-a569e47560839922_bg.wasm:74650
    <yew::virtual_dom::vnode::VNode as yew::virtual_dom::VDiff>::apply::h5ada5f6811c3091c http://localhost:8080/index-a569e47560839922_bg.wasm:118921
    <yew::html::component::lifecycle::RenderRunner<COMP> as yew::scheduler::Runnable>::run::h141fc43a81e68dea http://localhost:8080/index-a569e47560839922_bg.wasm:265635
    h777c78a08c5d7d02 http://localhost:8080/index-a569e47560839922_bg.wasm:456508
    h17f446eb5869be99 http://localhost:8080/index-a569e47560839922_bg.wasm:1211302
    h2a66a2816db40211 http://localhost:8080/index-a569e47560839922_bg.wasm:1688865
    he9a570ae3b091fcb http://localhost:8080/index-a569e47560839922_bg.wasm:2089810
    h9a161d7adc3a0c07 http://localhost:8080/index-a569e47560839922_bg.wasm:301710
    h2ef95c490db767d8 http://localhost:8080/index-a569e47560839922_bg.wasm:1185384
    ha9f4ef70fd988896 http://localhost:8080/index-a569e47560839922_bg.wasm:1924405
    h351ae7c224e3fd74 http://localhost:8080/index-a569e47560839922_bg.wasm:1360659
    hcaf28dd476695198 http://localhost:8080/index-a569e47560839922_bg.wasm:2090664
    hba1b05a5aa918edd http://localhost:8080/index-a569e47560839922_bg.wasm:1531177
    ha0929f69bb547658 http://localhost:8080/index-a569e47560839922_bg.wasm:2001429
    h57edaef532d0ce64 http://localhost:8080/index-a569e47560839922_bg.wasm:1993431
    hb685c5f96abb348e http://localhost:8080/index-a569e47560839922_bg.wasm:1910832
    h3571cdfd40ff9ca8 http://localhost:8080/index-a569e47560839922_bg.wasm:1231004
    h5876ec1c7efd0fe1 http://localhost:8080/index-a569e47560839922_bg.wasm:1531430
    main http://localhost:8080/index-a569e47560839922_bg.wasm:2088788
    <anonymous> http://localhost:8080/index-a569e47560839922_bg.wasm:2090651
    init http://localhost:8080/index-a569e47560839922.js:693
    AsyncFunctionNext self-hosted:695
    (Async: async)
    <anonymous> http://localhost:8080/new_tag:19
    InnerModuleEvaluation self-hosted:2388
    evaluation self-hosted:2349

[Magicloud]

Is this a bug? I removed all location/history change I made and I just got the error when click a Link. I am using yew 0.19.3, yew-router 0.16.0, yew-macro 0.19.3, yew-agent 0.1.0.

[voidpumpkin]

@Magicloud Have you provided a BrowserRouter (Its a context provider that all Router stuff uses) in a parent component?
Also make sure to store your listener inside the struct as it is going to get dropped otherwise.

(I know docs are not the best for this specific case, we are working to improve this)

[Magicloud]

Oh, good catch. I misred this part in router example. Thanks.