ui-router-navigation-location-plugin


> Experimental: This plugin uses the Navigation API, which has limited browser support.

A UI-Router location plugin that uses the modern browser Navigation API for URL management.

Features

- Uses the modern Navigation API instead of the History API
- Exposes UIRouter context in navigation events
- Proper handling for non-root deployments
- Supports navigation state and title metadata

Installation

``bash
npm install ui-router-navigation-location-plugin


or

pnpm add ui-router-navigation-location-plugin

or

yarn add ui-router-navigation-location-plugin
`

Quick Start

`typescript
import { UIRouter } from '@uirouter/core';
import { navigationLocationPlugin } from 'ui-router-navigation-location-plugin';

const router = new UIRouter();
router.plugin(navigationLocationPlugin);
`

Navigation Event Interception

A key feature of this plugin is exposing the UIRouter instance in navigation events, enabling interception:

`typescript
import { isUIRouterNavigateEvent } from 'ui-router-navigation-location-plugin';

window.navigation.addEventListener('navigate', (event) => {
if (isUIRouterNavigateEvent(event)) {
// Access UIRouter during navigation
const { uiRouter } = event.info;
}
});
`

API

$3

Factory function that creates a LocationPlugin for use with UIRouter.

`typescript
router.plugin(navigationLocationPlugin);
`

$3

The location service class that extends BaseLocationServices from @uirouter/core. Handles URL reading and writing using the Navigation API.

$3

Type guard function to check if a NavigateEvent was triggered by UIRouter.

`typescript
function isUIRouterNavigateEvent(event?: NavigateEvent): event is UIRouterNavigateEvent;
`

$3

Extended NavigateEvent interface with UIRouter metadata in the info property.

$3

Interface for the navigation event info containing the uiRouter instance.

`typescript
interface UIRouterNavigateInfo {
uiRouter: UIRouter;
}
`

Browser Compatibility

The Navigation API has limited browser support:

| Browser | Support |
| ------- | ------------- |
| Chrome | 102+ |
| Edge | 102+ |
| Firefox | Not supported |
| Safari | Not supported |

Check caniuse.com for current support status.

For broader browser support, consider using:

- pushStateLocationPlugin - History API based (wide support)
- hashLocationPlugin` - Hash-based URLs (universal support)

Comparison with Other Location Plugins

| Feature | Navigation API | pushState | hash |
| ------------------ | -------------- | --------- | --------- |
| Modern standard | Yes | No | No |
| Event interception | Yes | No | No |
| Browser support | Limited | Wide | Universal |
| SEO friendly | Yes | Yes | No |
| Clean URLs | Yes | Yes | No |

Links

- MDN - Navigation API
- @uirouter/core - LocationPlugin
- @uirouter/core - LocationServices
- @uirouter/core - BaseLocationServices
- Can I Use - Navigation API