Links & Navigation

When we split our app into pages, we need to provide our users with a way tonavigate 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 alot of time, and it is much faster to let the router handle the navigationclient-side.
2. Navigation using anchor tags only works when the app is running inside abrowser. This means we cannot use them inside apps using Dioxus Desktop.
3. Anchor tags cannot check if the target page exists. This means we cannotprevent accidentally linking to non-existent pages.

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

#[component]
fn NavBar(cx: Scope) -> Element {
    render! {
        nav {
            ul {
                li {
                    Link {
                        // The Link component will navigate to the route specified
                        // in the target prop which is checked to exist at compile time
                        to: Route::Home {},
                        "Home"
                    }
                }
            }
        }
        Outlet::<Route> {}
    }
}

The target in the example above is similar to the href of a regular anchorelement. However, it tells the router more about what kind of navigation itshould 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 usefulfor 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 docsfor more details.