Function dioxus_router::components::Link

pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element<'_>

A link to navigate to another route.

Only works as descendant of a [Router] component, otherwise it will be inactive.

Unlike a regular HTML anchor, a Link allows the router to handle the navigation and doesn’t cause the browser to load a new page.

However, in the background a Link still generates an anchor, which you can use for styling as normal.

External targets

When the Links target is an NavigationTarget::External target, that is used as the href directly. This means that a Link can always navigate to an NavigationTarget::External target, even if the [HistoryProvider] does not support it.

Panic

• When the Link is not nested within a [Router], but only in debug builds.

Example

#[derive(Clone, Routable)]
enum Route {
    #[route("/")]
    Index {},
}

fn App(cx: Scope) -> Element {
    render! {
        Router::<Route> {}
    }
}

#[inline_props]
fn Index(cx: Scope) -> Element {
    render! {
        render! {
            Link {
                active_class: "active",
                class: "link_class",
                id: "link_id",
                new_tab: true,
                rel: "link_rel",
                to: Route::Index {},
    
                "A fully configured link"
            }
        }
    }
}