Skip to main content

State-based routing for JavaScript SPAs

A framework-agnostic routing library with hierarchical states, powerful transitions, and flexible URL management. The foundation for UI-Router implementations across Angular, React, and more.

Get StartedAPI Reference

Quick start

Get UI-Router Core running in your project in minutes

1

Install the package

Add UI-Router Core to your project using your preferred package manager:
npm install @uirouter/core
2

Create a router instance

Import and instantiate the UIRouter class:
import { UIRouter } from '@uirouter/core';

const router = new UIRouter();
The router instance provides access to all core services: state management, transitions, URL handling, and more.
3

Register your states

Define the states that make up your application:
router.stateRegistry.register({
  name: 'home',
  url: '/',
  component: HomeComponent
});

router.stateRegistry.register({
  name: 'about',
  url: '/about',
  component: AboutComponent
});
States can be hierarchical, with parent-child relationships and nested views.
4

Start the router

Enable URL monitoring and synchronize with the current location:
router.urlService.listen();
router.urlService.sync();
The router is now active and will respond to navigation and URL changes.

Core features

Powerful routing capabilities for modern single-page applications

State machine routing

Organize your app as a hierarchical tree of states with enter/exit hooks and transaction-like transitions

Flexible URLs

Support for path, query, and non-URL parameters with built-in and custom types, defaults, and optional values

Transition hooks

First-class async support with lifecycle hooks for authentication, authorization, logging, and more

Nested views

Multiple named views and view nesting for complex UI layouts and component composition

Lazy loading

Load state configurations and dependencies on-demand to reduce initial bundle size

Framework agnostic

Core library works with any framework — official integrations for Angular and React available

Explore the documentation

Deep dive into concepts, guides, and API references

Core Concepts

Learn about states, transitions, URLs, parameters, views, and hooks — the building blocks of UI-Router

Explore concepts

Practical Guides

Step-by-step guides for common tasks: configuring states, handling navigation, working with parameters, and more

Browse guides

Resources and community

Connect with the UI-Router community and explore framework-specific implementations

GitHub Repository

View source code, report issues, and contribute to the project

UI-Router for Angular

Full-featured router for Angular 1.x applications

UI-Router for React

State-based routing for React applications

Ready to get started?

Build powerful, state-driven single-page applications with UI-Router Core

Start Building