Overview

Decide when to choose @aurelia/router-direct and find the key guides for the direct routing APIs.

@aurelia/router-direct is an alternative router that centers routing around components instead of global configuration. It keeps route definitions close to the feature they belong to, similar to Angular's standalone components or nested routing in React Router, while staying familiar to developers coming from the classic Aurelia 1 router.

Not sure which router you need? Read Choosing the right Aurelia router.

Highlights

• Component-driven configuration: declare routes on the component (static routes or @routes) so each feature owns its navigation contract without a central route table.

• Minimal bootstrap work: register RouterConfiguration once and start routing; most scenarios avoid extra setup or nested configuration objects.

• Template-friendly navigation: pair component routes with the load attribute and <au-viewport> for intuitive markup semantics.

• Familiar lifecycle: still supports navigation hooks, events, and animation triggers so you can guard routes or animate transitions.

Learning path

1. Getting started

2. Creating routes

3. Navigation patterns

4. Lifecycle hooks and route events

5. Animations and advanced recipes · Router recipes

6. Differences from v1 for migration notes

When to use which router

Choose @aurelia/router-direct when:

• You want each feature component to own its routes via static routes/@routes.

• You prefer minimal bootstrap configuration over a centralized route table.

• You are migrating from Aurelia v1 and want a closer mental model with fewer new concepts.

Stay with @aurelia/router when you want a centrally managed route tree, multi-viewport coordination, or explicit navigation state management. Both routers can coexist within a solution; use whichever fits each project best.

Related resources

• Compare configuration styles in the developer routing guides.

• Explore animation possibilities with au-animate in Router animation.