# Navigating With Load

## Router Instance

To use the `load` method, you have to first inject the router into your component. This can be done easily by using the `IRouter` decorator on your component constructor method. The following code will add a property to your component called `router` which we can reference.

```typescript
import { IRouter } from 'aurelia';

export class MyComponent implements IRouteableComponent {
    constructor(@IRouter private router: IRouter) {

    }
}
```

### Navigating Without Options

The `load` method can accept a simple string value allowing you to navigate to another component without needing to supply any configuration options.

```typescript
import { IRouter } from 'aurelia';

export class MyComponent implements IRouteableComponent {
    constructor(@IRouter private router: IRouter) {

    }

    viewProducts() {
        this.router.load('products');
    }
}
```

### Navigating With Parameters

In this example, we are navigating to a component called `product` and passing a parameter value of `12` which is the product ID we will check for from within the product component.

```typescript
import { IRouter } from 'aurelia';

export class MyComponent implements IRouteableComponent {
    constructor(@IRouter private router: IRouter) {

    }

    viewProduct() {
        this.router.load('product(12)');
    }
}
```

### Configuration Options: Passing Parameters

The `load` method can accept an object which contains the component we want to render (either the instance or the string name\` as well as an object called parameters.

```typescript
import { IRouter } from 'aurelia';

export class MyComponent implements IRouteableComponent {
    constructor(@IRouter private router: IRouter) {

    }

    viewProduct() {
        this.router.load({ component: Product, parameters: { id: '12' } });
    }
}
```

### Configuration Options: Specifying The Viewport

In instances where you have more than one viewport in your application, you can specify the viewport on the `load` configuration object. In this example, we are specifying we want to render our product component inside of the viewport named `main`.

```typescript
import { IRouter } from 'aurelia';

export class MyComponent implements IRouteableComponent {
    constructor(@IRouter private router: IRouter) {

    }

    viewProduct() {
        this.router.load({ component: 'product', parameters: { id: '12' }, viewport: 'main' });
    }
}
```

## HTML load Attribute

The router also allows you to decorate links and buttons in your application using a `load` attribute which works the same way as the router instance `load` method.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jwx.gitbook.io/aurelia-direct-router/routing/navigating-with-load.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.