Links & Navigation

When we split our app into pages, we need to provide our users with a way to navigate between them. On regular web pages we'd use an anchor element for that, like this:

<a href="/other">Link to an other page</a>

However, we cannot do that when using the router for two reasons:

  1. Anchor tags make the browser load a new page from the server. This takes a lot of time, and it is much faster to let the router handle the navigation client-side.
  2. Navigation using anchor tags only works when the app is running inside a browser. This means we cannot use them inside apps using Dioxus Desktop.

To solve these problems, the router provides us with a Link component we can use like this:


#![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::*;
fn SomeComponent(cx: Scope) -> Element {
    render! {
        Link {
            target: NavigationTarget::Internal(String::from("/some/path")),
            "Link text"
        }
        Link {
            target: "/some/path", // short form
            "Other link text"
        }
    }
}
}

The target in the example above is similar to the href of a regular anchor element. However, it tells the router more about what kind of navigation it should perform:

  • The example uses Internal. We give it an arbitrary path that will be merged with the current URL.
  • Named allows us to navigate within our app using predefined names. See the chapter about named navigation for more details.
  • External allows us to navigate to URLs outside of our app. See the chapter about external navigation for more details.

The Link accepts several props that modify its behavior. See the API docs for more details.