Linking Between Routes

Establishing links to different parts of your application can be done with the LinkTo component.

Let's link to an invoices page from a navbar in our application template:

// src/templates/application.hbs
<h1>Links:</h1>
<LinkTo @route="customers">
    <button class="btn btn-default">Customers</button>
</LinkTo>
<LinkTo @route="invoices">
    <button class="btn btn-default">Invoices</button>
</LinkTo>
{{outlet}}

This will generate the following file:

// src/generated/application.rs
...
#[component]
pub fn ApplicationView() -> impl IntoView {
    view! {
        <Router>
            <Routes fallback=|| "Not found.">
                ...
            </Routes>

            <h1>Links:</h1>
            <LinkTo path="customers".to_string()>
                <button class="btn btn-default">Customers</button>
            </LinkTo>
            <LinkTo path="invoices".to_string()>
                <button class="btn btn-default">Invoices</button>
            </LinkTo>
            <div />
        </Router>
    }
}