Function dioxus_router::components::Link

pub fn Link(props: LinkProps) -> 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 {},
}

#[component]
fn App() -> Element {
    rsx! {
        Router::<Route> {}
    }
}

#[component]
fn Index() -> Element {
    rsx! {
        rsx! {
            Link {
                active_class: "active",
                class: "link_class",
                id: "link_id",
                new_tab: true,
                rel: "link_rel",
                to: Route::Index {},

                "A fully configured link"
            }
        }
    }
}