# Navigation

Source: https://signy.dev/documentation/1/router/navigation/

Links, code and guards.

## Link

`Link` renders an `a` that navigates without a page load. The active link gets `router-link-active`, and the exact match `router-link-exact-active`.

```js
html`<${Link} to="/users/42">User 42</${Link}>`;
html`<${Link} to=${{ path: '/search', query: { q: 'signals' } }}>Search</${Link}>`;
```

The exact match also gets `aria-current="page"`, so screen readers announce the current page and CSS such as Iris CSS can style it. `ariaCurrentValue` changes the value, such as `"step"` in a wizard.

`replace` replaces the history entry, and `activeClass` and `exactActiveClass` rename the classes. `NavLink` also takes `isActive`, for your own matching.

## From code

`useRouter(this)` returns the router.

```js
class Logout extends Component {
  protected render() {
    const nav = useRouter(this);
    return html`<button onClick=${() => nav.push('/')}>Log out</button>`;
  }
}
```

The router also has `replace()`, `back()`, `forward()` and `go(delta)`.

## Guards

A guard runs before every navigation, the first one when the app opens and the browser's back and forward buttons included. Return `false` to cancel it, a path to redirect, or nothing to go on. Add guards for every route with `beforeEach()`, or for one route with `guards`.

When a guard cancels a back or forward move, the router steps back to the page on screen, so the page the user tried to open stays in the history. A guard that answers after the user has moved on is ignored.

```js
appRouter.beforeEach(({ to }) => {
  if (to.meta.private && !session.value) return '/login';
});

appRouter.afterEach(() => window.scrollTo(0, 0));
```