---
url: https://lit-ui-router.dev/api/reference/directives/SrefHrefDirective.md
---
[lit-ui-router](../index.md) / SrefHrefDirective

# Class: SrefHrefDirective

Defined in: [packages/lit-ui-router/src/sref-href.ts:37](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-href.ts#L37)

The attribute-part sibling of [UiSrefDirective](UiSrefDirective.md): the same link, bound
where the `href` lives instead of on the element.

`render()` is a function of the router and the arguments alone — it returns
the `href` and touches no DOM — which is the shape a server renderer needs,
since it runs `render()` and never `update()`. It finds its router from the
element in a document and from the server's render-scoped router under
`@lit-labs/ssr`. Everything else that needs the element (the click handler,
the target event for an enclosing `uiSrefActive`) lives in `update()`, which
only a live document runs.

## See

[srefHref](srefHref.md) for the public API

## Extends

* [`AsyncDirective`](https://lit.dev/docs/api/custom-directives/#AsyncDirective)

## Properties

| Property | Type | Default value | Description | Defined in |
| ------ | ------ | ------ | ------ | ------ |
|  `href` | `string` | `null` | `null` | the href computed for the target, or null when there is none | [packages/lit-ui-router/src/sref-href.ts:54](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-href.ts#L54) |
|  `options` | [`TransitionOptions`](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.transitionoptions.html) | `{}` | the transition options from the last render | [packages/lit-ui-router/src/sref-href.ts:43](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-href.ts#L43) |
|  `params` | [`RawParams`](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html) | `{}` | the target state params from the last render | [packages/lit-ui-router/src/sref-href.ts:41](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-href.ts#L41) |
|  `state` | `string` | `null` | `null` | the target state name from the last render | [packages/lit-ui-router/src/sref-href.ts:39](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-href.ts#L39) |
|  `targetState` | | [`TargetState`](https://ui-router.github.io/core/docs/latest/classes/_state_targetstate_.targetstate.html) | `null` | `null` | the resolved target, or null until the router is found | [packages/lit-ui-router/src/sref-href.ts:56](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-href.ts#L56) |

## Methods

### render()

```ts
render(
   state, 
   params?, 
   options?
): string | typeof nothing | typeof noChange;
```

Defined in: [packages/lit-ui-router/src/sref-href.ts:95](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-href.ts#L95)

The `href` for the target state; `nothing` when the state has no url;
`noChange` until a router is found, so an attribute a server wrote
survives hydration untouched.

The scoped slot is read per render rather than cached: a server directive
instance renders once, and a client one never finds a scoped router.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `string` |
| `params?` | [`RawParams`](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html) |
| `options?` | [`TransitionOptions`](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.transitionoptions.html) |

#### Returns

`string` | *typeof* `nothing` | *typeof* `noChange`

#### Overrides

`AsyncDirective.render`