---
url: >-
  https://lit-ui-router.dev/api/lit-ui-router-effect/classes/RouterRefController.md
---
[lit-ui-router-effect](../index.md) / RouterRefController

# Class: RouterRefController\<T>

Defined in: [lit-ui-router-effect/src/router-ref-controller.ts:57](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router-effect/src/router-ref-controller.ts#L57)

A [RefController](RefController.md) preselected on the router: follows the
[routeRef](../functions/routeRef.md) of the host's `<ui-router>` context.

```ts
class App extends LitElement {
  private active = new RouterRefController(
    this,
    (route) => route.includes('admin.**'),
  );

  render() {
    return html`...${this.active.value ? 'admin' : ''}...`;
  }
}
```

Same lifecycle as the base: seeded synchronously on every (re)connect, one
forked fiber while connected, interrupted on disconnect. A host outside any
`<ui-router>` (with no explicit or scoped router) warns once in development
and is a no-op until it reconnects under one or is handed a router with
[RouterRefController.setRouter](#setrouter); `.value` stays at
`options.initialValue`.

## Extends

* [`RefController`](RefController.md)\<readonly \[[`SubscriptionRef.SubscriptionRef`](https://effect.website/docs/state-management/subscriptionref/)<[`TypedRouteSnapshot`](../type-aliases/TypedRouteSnapshot.md)>], `T`>

## Type Parameters

| Type Parameter |
| ------ |
|  `T` |

## Constructors

### Constructor

```ts
new RouterRefController<T>(
   host, 
   selector, 
   options?
): RouterRefController<T>;
```

Defined in: [lit-ui-router-effect/src/router-ref-controller.ts:65](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router-effect/src/router-ref-controller.ts#L65)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `host` | [`ReactiveControllerHost`](https://lit.dev/docs/api/controllers/#ReactiveControllerHost) & `Element` |
| `selector` | (`route`) => `T` |
| `options?` | [`RouterRefControllerOptions`](../interfaces/RouterRefControllerOptions.md)<`T`> |

#### Returns

`RouterRefController`<`T`>

#### Overrides

[`RefController`](RefController.md).[`constructor`](RefController.md#constructor)

## Properties

| Property | Type | Description | Inherited from | Defined in |
| ------ | ------ | ------ | ------ | ------ |
|  `value` | `T` | The selected value, for use in `render()`. | [`RefController`](RefController.md).[`value`](RefController.md#value) | [lit-ui-router-effect/src/ref-controller.ts:119](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router-effect/src/ref-controller.ts#L119) |

## Methods

### hostConnected()

```ts
hostConnected(): void;
```

Defined in: [lit-ui-router-effect/src/router-ref-controller.ts:124](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router-effect/src/router-ref-controller.ts#L124)

Called when the host is connected to the component tree. For custom
element hosts, this corresponds to the `connectedCallback()` lifecycle,
which is only called when the component is connected to the document.

#### Returns

`void`

#### Overrides

[`RefController`](RefController.md).[`hostConnected`](RefController.md#hostconnected)

***

### hostDisconnected()

```ts
hostDisconnected(): void;
```

Defined in: [lit-ui-router-effect/src/router-ref-controller.ts:132](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router-effect/src/router-ref-controller.ts#L132)

Called when the host is disconnected from the component tree. For custom
element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
which is called the host or an ancestor component is disconnected from the
document.

#### Returns

`void`

#### Overrides

[`RefController`](RefController.md).[`hostDisconnected`](RefController.md#hostdisconnected)

***

### setRefs()

```ts
protected setRefs(refs): void;
```

Defined in: [lit-ui-router-effect/src/ref-controller.ts:155](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router-effect/src/ref-controller.ts#L155)

Replaces the refs. A connected controller interrupts its fiber and
re-seeds and re-forks on the new refs, as a reconnect does; a
disconnected one only records them for its next `hostConnected`.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `refs` | [`RefSource`](../type-aliases/RefSource.md)\<readonly \[[`SubscriptionRef`](https://effect.website/docs/state-management/subscriptionref/)<[`RouteSnapshot`](../interfaces/RouteSnapshot.md)>]> |

#### Returns

`void`

#### Inherited from

[`RefController`](RefController.md).[`setRefs`](RefController.md#setrefs)

***

### setRouter()

```ts
setRouter(router): void;
```

Defined in: [lit-ui-router-effect/src/router-ref-controller.ts:117](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router-effect/src/router-ref-controller.ts#L117)

Follows `router` from now on. A connected host interrupts its fiber,
re-seeds `.value` from the new router's [routeRef](../functions/routeRef.md), re-forks, and
updates; a disconnected one takes the router on its next `hostConnected`.
The router already followed is a no-op.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `router` | [`UIRouter`](https://ui-router.github.io/core/docs/latest/classes/_router_.uirouter.html) |

#### Returns

`void`