# @microsoft/fast-router

> A web-components-based router.

Latest version **1.0.0-alpha.31** (published 2026-06-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @microsoft/fast-router
pnpm add @microsoft/fast-router
yarn add @microsoft/fast-router
bun add @microsoft/fast-router
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.31 |
| Published | 2026-06-25 |
| First published | 2021-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 562.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9681 |
| Author | Microsoft |
| Maintainers | microsoft1es, microsoft-oss-releases, fastsvc, janechu, eisenbergeffect, chrisdholt, awentzel, nirice |

## Links

- npm: https://www.npmjs.com/package/@microsoft/fast-router
- Repository: https://github.com/Microsoft/fast
- Homepage: https://www.fast.design/
- Issues: https://github.com/Microsoft/fast/issues/new/choose
- npm.io page: https://npm.io/package/@microsoft/fast-router

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.6.3

## Recent versions

- 1.0.0-alpha.31 (latest) — 2026-06-25
- 1.0.0-alpha.30-fast-element-v3-rc-20260615 (rc-20260615) — 2026-06-20
- 1.0.0-alpha.30 (alpha) — 2026-02-17
- 1.0.0-alpha.29 — 2024-12-11
- 0.4.10 — 2024-10-23
- 1.0.0-alpha.28 — 2024-08-19
- 1.0.0-alpha.27 — 2024-06-20
- 0.4.9 — 2024-04-08
- 1.0.0-alpha.26 — 2023-08-18
- 1.0.0-alpha.25 — 2023-08-12
- 1.0.0-alpha.24 — 2023-06-16
- 0.4.8 — 2023-05-04
- 0.4.7 — 2023-04-14
- 1.0.0-alpha.23 — 2023-03-28
- 1.0.0-alpha.22 — 2023-03-11
- … 47 more at https://npm.io/package/@microsoft/fast-router/versions

## README

# FAST Router

The `@microsoft/fast-router` package contains a history-based navigation and routing solution designed around Web Components. By using `fast-router`, you can create multi-page and full application experiences. The router works with any Web Components, but has special support for Web Components built on FAST.

## Installation

### From NPM

To install the `fast-router` library using `npm`:

```shell
npm install --save @microsoft/fast-router
```

Within your JavaScript or TypeScript code, you can then import library APIs like this:

```ts
import { FASTRouter } from '@microsoft/fast-router';
```

Looking for a setup that integrates with a particular front-end framework or bundler? Check out [our integration docs](https://fast.design/docs/integrations/introduction).

## Configuration at a Glance

The router is currently in `alpha` while we address a few bugs, finish up some final polish, and write the full documentation. Below is a quick sample of how to configure the router, to help get you going while we complete the full documentation.

#### A Sample Route Configuration

```ts
import { RouterConfiguration, Route } from '@microsoft/fast-router';
import { HomeScreen } from './home';
import { AccountLogin } from './account/login';
import { AccountSignup } from './account/signup';
import { ConfirmEmail } from './account/confirm-email';
import { Session } from './account/session';
import { AccountSettings } from './account/settings';
import { StoreArea } from './store/store-area';
import { NotFound } from './not-found';
import { pageLayout } from './layouts/page-layout';
import { anonymousLayout } from './layouts/anonymous-layout';

type RouteSettings = {
  public?: boolean
};

export class AppRouterConfiguration extends RouterConfiguration<RouteSettings> {
  public configure() {
    this.title = 'My App';
    this.defaultLayout = pageLayout;
    this.routes.map(
      { path: '', redirect: 'home' },
      { path: 'home', title: 'Home', element: HomeScreen },
      { 
        path: 'account', 
        layout: anonymousLayout, 
        title: 'Account',
        settings: { public: true }, 
        children: [
          { path: "login", title: 'Login', element: AccountLogin, name: 'login' },
          { path: 'signup' title: 'Signup', element: AccountSignup },
          { path: 'confirm/{confirmation:Confirmation}', title: 'Confirm', element: ConfirmEmail },
          { path: 'settings', title: 'Settings', element: AccountSettings, layout: pageLayout, settings: { public: false } },
        ] 
      },
      { path: 'store', title: 'Store', element: StoreArea, childRouters: true },
      { path: 'not-found', title: 'Not Found', element: NotFound }
    );

    this.routes.fallback(
      () => Session.isLoggedIn
        ? { redirect: 'not-found' }
        : { redirect: 'login' }
    );

    this.routes.converter("Confirmation", async (confirmationId) => {
      // ...fetch confirmation from web service...
      return confirmation;
    });

    this.contributors.push({
      navigate(phase) {
        const settings = phase.route.settings;
  
        if (settings && settings.public) {
          return;
        }
  
        if (Session.loggedIn) {
          return;
        }
  
        phase.cancel(() => {
          Session.returnUrl = Route.path.current;
          Route.name.replace(phase.router, 'login');
        });
      }
    });
  }
}
```

#### Using the Configuration with a Router

```ts
import { FASTElement, customElement } from '@microsoft/fast-element/fast-element.js';
import { css } from '@microsoft/fast-element/css.js';
import { html } from '@microsoft/fast-element/html.js';
import { FASTRouter } from '@microsoft/fast-router';
import { AppRouterConfiguration } from './routes';

FASTRouter;

const template = html<MainApplication>`
    <fast-router :config=${x => x.routerConfiguration}></fast-router>
`;

const styles = css`
  :host {
    contain: content;
  }

  :host, fast-router {  
    display: block;
    width: 100%;
    height: 100%;
  }
`;

@customElement({
  name: 'main-application',
  template,
  styles
})
export class MainApplication extends FASTElement {
  routerConfiguration = new AppRouterConfiguration();
}
```

---
_Source: https://npm.io/package/@microsoft/fast-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._