Linking Between Routes

Establishing links to different parts of your application can be done with the LinkTo component. It takes a @route parameter, which specifies the dot-delimited name of the route to link to.

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>
            <LinkToComponent path="customers".to_string()>
                <button class="btn btn-default">Customers</button>
            </LinkToComponent>
            <LinkToComponent path="invoices".to_string()>
                <button class="btn btn-default">Invoices</button>
            </LinkToComponent>
            <div />
        </Router>
    }
}

Dynamic Segments

The LinkTo component also supports a @model parameter, which is required to navigate to a route with a dynamic segment, such as /customer/123.

<LinkTo @route="customer" @model="123">
    <button class="btn btn-default">Customer 123</button>
</LinkTo>

You can also use a HTMLbars expression:

<LinkTo @route="customer" @model="{{ this.model.id }}">
    <button class="btn btn-default">Customer 123</button>
</LinkTo>

NOTE:

The HTMLbars expression within the mustache requires double-quotes around it, whereas in Ember the quotes are not required. I hope this inconvenience is temporary.