From fdbb7b5184287ba710ba02b01fa05aaffdefb032 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Sat, 2 Jul 2016 15:51:49 -0700 Subject: [PATCH] docs(router): clarify router redirect and link to Victor's blog post --- public/docs/ts/latest/guide/router.jade | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index fb749b68ef..9b7e260093 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -978,22 +978,33 @@ code-example(format=""). 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. - The preferred solution is to add a `redirect` route that transparently translates from the initial URL (`''`) to the preferred default path (`/crisis-center`): + The preferred solution is to add a `redirect` route that transparently translates from the initial relative URL (`''`) + to the desired 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 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 `''`, + In this app, the router should select the route to the `CrisisListComponent` when the *entire URL* matches `''`, so we set the `pathMatch` value to `'full'`. .l-sub-section :marked + Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`. + In our example, the redirect is at the top level of the route configuration tree so the *remaining* URL and the *entire* URL + are the same thing. + 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. + to match the redirect route when the *remaining* URL ***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 `'/'`). + That's not what we want to do here. If the `pathMatch` value were `'prefix'`, + _every_ URL would match `''`. + We could never navigate to `/crisis-center/1` because the redirect route would match first and + send us to the `CrisisListComponent`. + + We should redirect to the `CrisisListComponent` _only_ when the _entire (remaining)_ url is `''`. + + Learn more in Victor Savkin's blog + [post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes). We'll discuss redirects in more detail in a future update to this chapter.