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 <base href> handling for non-root deployments
• Supports navigation state and title metadata

Installation

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

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:

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

navigationLocationPlugin

Factory function that creates a LocationPlugin for use with UIRouter.

router.plugin(navigationLocationPlugin);

NavigationLocationService

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

isUIRouterNavigateEvent(event)

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

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

UIRouterNavigateEvent

Extended NavigateEvent interface with UIRouter metadata in the info property.

UIRouterNavigateInfo

Interface for the navigation event info containing the uiRouter instance.

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