docs: replace terminal with pathMatch, base href with '/'

closes #1799
This commit is contained in:
Foxandxss 2016-07-01 00:11:33 +02:00 committed by Ward Bell
parent 527fe50b88
commit 1900eb1c70
12 changed files with 24 additions and 20 deletions

View File

@ -10,7 +10,7 @@ export const CrisisCenterRoutes: RouterConfig = [
{ {
path: '', path: '',
redirectTo: '/crisis-center', redirectTo: '/crisis-center',
terminal: true pathMatch: 'full'
}, },
// #enddocregion redirect // #enddocregion redirect
{ {

View File

@ -12,7 +12,7 @@ export const CrisisCenterRoutes: RouterConfig = [
{ {
path: '', path: '',
redirectTo: '/crisis-center', redirectTo: '/crisis-center',
terminal: true pathMatch: 'full'
}, },
{ {
path: 'crisis-center', path: 'crisis-center',

View File

@ -13,7 +13,7 @@ export const CrisisCenterRoutes: RouterConfig = [
{ {
path: '', path: '',
redirectTo: '/crisis-center', redirectTo: '/crisis-center',
terminal: true pathMatch: 'full'
}, },
{ {
path: 'crisis-center', path: 'crisis-center',

View File

@ -12,7 +12,7 @@ export const CrisisCenterRoutes: RouterConfig = [
{ {
path: '', path: '',
redirectTo: '/crisis-center', redirectTo: '/crisis-center',
terminal: true pathMatch: 'full'
}, },
{ {
path: 'crisis-center', path: 'crisis-center',

View File

@ -3,7 +3,7 @@
<html> <html>
<head> <head>
<!-- #docregion base-href --> <!-- #docregion base-href -->
<base href="."> <base href="/">
<!-- #enddocregion base-href --> <!-- #enddocregion base-href -->
<title>Router Sample v.1</title> <title>Router Sample v.1</title>
<meta charset="UTF-8"> <meta charset="UTF-8">

View File

@ -2,7 +2,7 @@
<!-- #docregion --> <!-- #docregion -->
<html> <html>
<head> <head>
<base href="."> <base href="/">
<title>Router Sample v.2</title> <title>Router Sample v.2</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

View File

@ -2,7 +2,7 @@
<!-- #docregion --> <!-- #docregion -->
<html> <html>
<head> <head>
<base href="."> <base href="/">
<title>Router Sample v.3</title> <title>Router Sample v.3</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

View File

@ -4,7 +4,7 @@
<html> <html>
<head> <head>
<!-- Set the base href --> <!-- Set the base href -->
<base href="."> <base href="/">
<title>Router Sample</title> <title>Router Sample</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

View File

@ -11,7 +11,7 @@ export const routes: RouterConfig = [
{ {
path: '', path: '',
redirectTo: '/dashboard', redirectTo: '/dashboard',
terminal: true pathMatch: 'full'
}, },
// #enddocregion redirect-route // #enddocregion redirect-route
// #docregion dashboard-route // #docregion dashboard-route

View File

@ -11,7 +11,7 @@ export const routes: RouterConfig = [
{ {
path: '', path: '',
redirectTo: '/dashboard', redirectTo: '/dashboard',
terminal: true pathMatch: 'full'
}, },
{ {
path: 'dashboard', path: 'dashboard',

View File

@ -9,7 +9,7 @@ export const routes: RouterConfig = [
{ {
path: '', path: '',
redirectTo: '/dashboard', redirectTo: '/dashboard',
terminal: true pathMatch: 'full'
}, },
{ {
path: 'dashboard', path: 'dashboard',

View File

@ -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. 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. 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. This is our intended default route.
We can arrange for that behavior in several ways. The preferred solution is to add a `redirect` route that transparently translates from the initial URL (`''`) to the preferred default path (`/crisis-center`):
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:
+makeExample('router/ts/app/crisis-center/crisis-center.routes.2.ts', 'redirect', 'app/crisis-center/crisis-center.routes.ts (redirect route)' )(format='.') +makeExample('router/ts/app/crisis-center/crisis-center.routes.2.ts', 'redirect', 'app/crisis-center/crisis-center.routes.ts (redirect route)' )(format='.')
:marked :marked
Since we only want to redirect when our path specifically matches `''`, we've added an extra configuration A redirect route requires a `pathMatch` property to tell the router how to match a URL to the path of a route.
to our route using `terminal: true`. Mainly for redirects, the `terminal` property tells the router In this app, the router should select the route to `CrisisCenterComponent` when the *entire URL* matches `''`,
whether or not it should continue matching our URL against the rest of our defined routes. so we set the `pathMatch` value to `'full'`.
.l-sub-section .l-sub-section
:marked :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 :marked
The updated route definitions look like this: The updated route definitions look like this: