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(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 anchorNavigationTarget]

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

The Link]