dioxus/docs/router/src/reference/navigation/index.md

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 three 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.
3. Anchor tags cannot check if the target page exists. This means we cannot prevent accidentally linking to non-existent pages.

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

{{#include ../../../examples/links.rs:nav}}

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. It accepts something that can be converted into a [NavigationTarget]:

• The example uses a Internal route. This is the most common type of navigation. It tells the router to navigate to a page within our app by passing a variant of a [Routable] enum. This type of navigation can never fail if the link component is used inside a router component.
• [External] allows us to navigate to URLs outside of our app. This is useful for links to external websites. NavigationTarget::External accepts an URL to navigate to. This type of navigation can fail if the URL is invalid.

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