parent
527fe50b88
commit
1900eb1c70
@ -10,7 +10,7 @@ export const CrisisCenterRoutes: RouterConfig = [
|
|||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
redirectTo: '/crisis-center',
|
redirectTo: '/crisis-center',
|
||||||
terminal: true
|
pathMatch: 'full'
|
||||||
},
|
},
|
||||||
// #enddocregion redirect
|
// #enddocregion redirect
|
||||||
{
|
{
|
||||||
|
@ -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',
|
||||||
|
@ -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',
|
||||||
|
@ -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',
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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
|
||||||
|
@ -11,7 +11,7 @@ export const routes: RouterConfig = [
|
|||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
redirectTo: '/dashboard',
|
redirectTo: '/dashboard',
|
||||||
terminal: true
|
pathMatch: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'dashboard',
|
path: 'dashboard',
|
||||||
|
@ -9,7 +9,7 @@ export const routes: RouterConfig = [
|
|||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
redirectTo: '/dashboard',
|
redirectTo: '/dashboard',
|
||||||
terminal: true
|
pathMatch: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'dashboard',
|
path: 'dashboard',
|
||||||
|
@ -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:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user