diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts index 43eadbd55e..5f44ba160a 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts @@ -10,7 +10,7 @@ export const CrisisCenterRoutes: RouterConfig = [ { path: '', redirectTo: '/crisis-center', - terminal: true + pathMatch: 'full' }, // #enddocregion redirect { diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts index 1f194ac6f7..75af21c534 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts @@ -12,7 +12,7 @@ export const CrisisCenterRoutes: RouterConfig = [ { path: '', redirectTo: '/crisis-center', - terminal: true + pathMatch: 'full' }, { path: 'crisis-center', diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts index f238e132a7..b49bf6dfda 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts @@ -13,7 +13,7 @@ export const CrisisCenterRoutes: RouterConfig = [ { path: '', redirectTo: '/crisis-center', - terminal: true + pathMatch: 'full' }, { path: 'crisis-center', diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts index a924aa5771..6f40ce64b3 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts @@ -12,7 +12,7 @@ export const CrisisCenterRoutes: RouterConfig = [ { path: '', redirectTo: '/crisis-center', - terminal: true + pathMatch: 'full' }, { path: 'crisis-center', diff --git a/public/docs/_examples/router/ts/index.1.html b/public/docs/_examples/router/ts/index.1.html index a560164d1d..dbf32ae565 100644 --- a/public/docs/_examples/router/ts/index.1.html +++ b/public/docs/_examples/router/ts/index.1.html @@ -3,7 +3,7 @@ - + Router Sample v.1 diff --git a/public/docs/_examples/router/ts/index.2.html b/public/docs/_examples/router/ts/index.2.html index 320e546c31..2330a69e75 100644 --- a/public/docs/_examples/router/ts/index.2.html +++ b/public/docs/_examples/router/ts/index.2.html @@ -2,7 +2,7 @@ - + Router Sample v.2 diff --git a/public/docs/_examples/router/ts/index.3.html b/public/docs/_examples/router/ts/index.3.html index 3cc7fe0b6f..a142bb6fcc 100644 --- a/public/docs/_examples/router/ts/index.3.html +++ b/public/docs/_examples/router/ts/index.3.html @@ -2,7 +2,7 @@ - + Router Sample v.3 diff --git a/public/docs/_examples/router/ts/index.html b/public/docs/_examples/router/ts/index.html index 5a26972f4f..b15ea73dfa 100644 --- a/public/docs/_examples/router/ts/index.html +++ b/public/docs/_examples/router/ts/index.html @@ -4,7 +4,7 @@ - + Router Sample diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts index 17f2df4e98..8b4d582680 100644 --- a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts +++ b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts @@ -11,7 +11,7 @@ export const routes: RouterConfig = [ { path: '', redirectTo: '/dashboard', - terminal: true + pathMatch: 'full' }, // #enddocregion redirect-route // #docregion dashboard-route diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.ts b/public/docs/_examples/toh-5/ts/app/app.routes.ts index b4f1f1efa1..33097804eb 100644 --- a/public/docs/_examples/toh-5/ts/app/app.routes.ts +++ b/public/docs/_examples/toh-5/ts/app/app.routes.ts @@ -11,7 +11,7 @@ export const routes: RouterConfig = [ { path: '', redirectTo: '/dashboard', - terminal: true + pathMatch: 'full' }, { path: 'dashboard', diff --git a/public/docs/_examples/toh-6/ts/app/app.routes.ts b/public/docs/_examples/toh-6/ts/app/app.routes.ts index b299102385..1d9adf33fd 100644 --- a/public/docs/_examples/toh-6/ts/app/app.routes.ts +++ b/public/docs/_examples/toh-6/ts/app/app.routes.ts @@ -9,7 +9,7 @@ export const routes: RouterConfig = [ { path: '', redirectTo: '/dashboard', - terminal: true + pathMatch: 'full' }, { path: 'dashboard', diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index f4a50cd506..fb749b68ef 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -975,23 +975,27 @@ code-example(format=""). That doesn't match any of our configured routes which means that our application won't display any component when it's launched. The user must click one of the navigation links to trigger a navigation and display something. - We want the application to display the list of crises as it would if we pasted `localhost:3000/crisis-center/` into the address bar. + We prefer that the application display the list of crises as it would if the user clicked the "Crisis Center" link or pasted `localhost:3000/crisis-center/` into the address bar. This is our intended default route. - We can arrange for that behavior in several ways. - One way is to use a `redirect` to transparently navigate from one route to another. - - In our example, we'll add a route to match our initial URL and redirect to our `crisis-center` route: + The preferred solution is to add a `redirect` route that transparently translates from the initial URL (`''`) to the preferred default path (`/crisis-center`): +makeExample('router/ts/app/crisis-center/crisis-center.routes.2.ts', 'redirect', 'app/crisis-center/crisis-center.routes.ts (redirect route)' )(format='.') :marked - Since we only want to redirect when our path specifically matches `''`, we've added an extra configuration - to our route using `terminal: true`. Mainly for redirects, the `terminal` property tells the router - whether or not it should continue matching our URL against the rest of our defined routes. + A redirect route requires a `pathMatch` property to tell the router how to match a URL to the path of a route. + In this app, the router should select the route to `CrisisCenterComponent` when the *entire URL* matches `''`, + so we set the `pathMatch` value to `'full'`. .l-sub-section :marked - We'll discuss redirects further in a future update to this chapter. + The other possible `pathMatch` value is `'prefix'` which tells the router + to match the redirect route to _any_ URL that _begins_ with the redirect route's _prefix_ path. + + That's not what we want in our use case. The `''` prefix path matches _every_ URL. + We should redirect to the `CrisisCenterComponent` _only_ when the _entire_ url is `''` + (or the equivalent `'/'`). + + We'll discuss redirects in more detail in a future update to this chapter. :marked The updated route definitions look like this: