Foxandxss
Ward Bell
parent
527fe50b88
commit
1900eb1c70
|
|
@ -10,7 +10,7 @@ export const CrisisCenterRoutes: RouterConfig = [
|
|||
{
|
||||
path: '',
|
||||
redirectTo: '/crisis-center',
|
||||
terminal: true
|
||||
pathMatch: 'full'
|
||||
},
|
||||
// #enddocregion redirect
|
||||
{
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export const CrisisCenterRoutes: RouterConfig = [
|
|||
{
|
||||
path: '',
|
||||
redirectTo: '/crisis-center',
|
||||
terminal: true
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
path: 'crisis-center',
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const CrisisCenterRoutes: RouterConfig = [
|
|||
{
|
||||
path: '',
|
||||
redirectTo: '/crisis-center',
|
||||
terminal: true
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
path: 'crisis-center',
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export const CrisisCenterRoutes: RouterConfig = [
|
|||
{
|
||||
path: '',
|
||||
redirectTo: '/crisis-center',
|
||||
terminal: true
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
path: 'crisis-center',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- #docregion base-href -->
|
||||
<base href=".">
|
||||
<base href="/">
|
||||
<!-- #enddocregion base-href -->
|
||||
<title>Router Sample v.1</title>
|
||||
<meta charset="UTF-8">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<base href=".">
|
||||
<base href="/">
|
||||
<title>Router Sample v.2</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<base href=".">
|
||||
<base href="/">
|
||||
<title>Router Sample v.3</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Set the base href -->
|
||||
<base href=".">
|
||||
<base href="/">
|
||||
<title>Router Sample</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const routes: RouterConfig = [
|
|||
{
|
||||
path: '',
|
||||
redirectTo: '/dashboard',
|
||||
terminal: true
|
||||
pathMatch: 'full'
|
||||
},
|
||||
// #enddocregion redirect-route
|
||||
// #docregion dashboard-route
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const routes: RouterConfig = [
|
|||
{
|
||||
path: '',
|
||||
redirectTo: '/dashboard',
|
||||
terminal: true
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export const routes: RouterConfig = [
|
|||
{
|
||||
path: '',
|
||||
redirectTo: '/dashboard',
|
||||
terminal: true
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
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.
|
||||
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:
|
||||
|
|
|
|||
Loading…
Reference in New Issue