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:
- 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.
- 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.