External Navigation
In modern apps, and especially on the web, we often want to send our users to an
other website. External
allows us to make a Link
navigate to an
external page.
You might already now about external navigation failures. The
Link
component doesn't rely on the code path where those originate. Therefore aLink
will never trigger an external navigation failure.
Strictly speaking, a Link
is not necessary for navigating to external
targets, since by definition the router cannot handle them internally. However,
the Link
component is more convenient to use, as it automatically sets the
rel
attribute for the link, when the target is external.
Code Example
#![allow(unused)] fn main() { // Hidden lines (like this one) make the documentation tests work. extern crate dioxus; use dioxus::prelude::*; extern crate dioxus_router; use dioxus_router::prelude::*; extern crate dioxus_ssr; fn App(cx: Scope) -> Element { use_router( cx, &|| RouterConfiguration { synchronous: true, ..Default::default() }, &|| Segment::empty() ); render! { // links need to be inside a router, even if they navigate to an // external page Link { target: NavigationTarget::External("https://dioxuslabs.com/".into()), "Go to the dioxus home page" } Link { target: "https://dioxuslabs.com/", // short form "Go to the dioxus home page 2" } } } let mut vdom = VirtualDom::new(App); vdom.rebuild(); let html = dioxus_ssr::render(&vdom); assert_eq!( html, format!( "<a {attr1} {attr2}>{text}</a><a {attr1} {attr2}>{text} 2</a>", attr1 = r#"href="https://dioxuslabs.com/" dioxus-prevent-default="""#, attr2 = r#"class="" id="" rel="noopener noreferrer" target="""#, text = "Go to the dioxus home page" ) ) }
Note that the short form for an [
ExternalTarget
] looks like the short form for an [InternalTarget
]. The router will create an [ExternalTarget
] only if the URL is absolute.