Links & Navigation

When we split our app into pages, we need to provide our users with a way to

<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
2. Navigation using anchor tags only works when the app is running inside a
3. Anchor tags cannot check if the target page exists. This means we cannot

To solve these problems, the router provides us with a Link]

#[component]
fn NavBar() -> Element {
    rsx! {
        nav {
            ul {
                li {
                    Link { to: Route::Home {}, "Home" }
                }
            }
        }
        Outlet::<Route> {}
    }
}

The target in the example above is similar to the href of a regular anchorNavigationTarget]

• The example uses a Internal route. This is the most common type of navigation.Routable]
• [External]

The Link]