---
url: >-
  https://lit-ui-router.dev/reference/ui-router-server/location/functions/serverLocationPlugin.md
---
[ui-router-server](../../index.md) / [location](../index.md) / serverLocationPlugin

# Function: serverLocationPlugin()

```ts
function serverLocationPlugin(uiRouter, options?): LocationPlugin;
```

Defined in: [location.ts:86](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/ui-router-server/src/location.ts#L86)

The memory location plugin a server render installs, in the url shape its
client uses.

The router's own `memoryLocationPlugin` is hash-shaped and cannot be asked
for anything else — its `html5Mode()` is `false` — so
`stateService.href('sheet', { num: '7B' })` comes back as `#/sheet/7B` on
the server while a pushState browser writes `/sheet/7B`, and every
server-rendered link differs from its hydrated self. This plugin pairs the
same in-memory `MemoryLocationService` with
[\`ServerLocationConfig\`](../classes/ServerLocationConfig.md), which takes the mode
from [\`html5Mode\`](../interfaces/ServerLocationPluginOptions.md#html5mode): paths by
default, to match `pushStateLocationPlugin` or the Navigation API plugin,
and fragments under `{ html5Mode: false }`, to match `hashLocationPlugin`.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `uiRouter` | [`UIRouter`](https://ui-router.github.io/core/docs/latest/classes/_router_.uirouter.html) | the router the plugin is installed on |
| `options?` | [`ServerLocationPluginOptions`](../interfaces/ServerLocationPluginOptions.md) | the url shape the client uses |

## Returns

`LocationPlugin`

the installed location plugin

## Example

```ts
import { UIRouter } from '@uirouter/core';
import { serverLocationPlugin } from 'ui-router-server/location';

const router = new UIRouter();
router.plugin(serverLocationPlugin);
// or, for a hash client:
router.plugin(serverLocationPlugin, { html5Mode: false });
```