Skip to content

Commit f3926fd

Browse files
lacolacolacolaco
authored
feat(docs): translate redirecting routes documentation to Japanese (#1056)
1 parent fdaa969 commit f3926fd

File tree

2 files changed

+182
-38
lines changed

2 files changed

+182
-38
lines changed

‎adev-ja/src/content/guide/routing/redirecting-routes.en.md

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# Redirecting Routes
2+
3+
Route redirects allow you to automatically navigate users from one route to another. Think of it like mail forwarding, where mail intended for one address is sent to a different address. This is useful for handling legacy URLs, implementing default routes, or managing access control.
4+
5+
## How to configure redirects
6+
7+
You can define redirects in your route configuration with the `redirectTo` property. This property accepts a string.
8+
9+
```ts
10+
import { Routes } from '@angular/router';
11+
12+
const routes: Routes = [
13+
// Simple redirect
14+
{ path: 'marketing', redirectTo: 'newsletter' },
15+
16+
// Redirect with path parameters
17+
{ path: 'legacy-user/:id', redirectTo: 'users/:id' },
18+
19+
// Redirect any other URLs that don’t match
20+
// (also known as a "wildcard" redirect)
21+
{ path: '**', redirectTo: '/login' }
22+
];
23+
```
24+
25+
In this example, there are three redirects:
26+
27+
1. When a user visits the `/marketing` path, they are redirected to `/newsletter`.
28+
2. When a user visits any `/legacy-user/:id` path, they are routed to the corresponding `/users/:id` path.
29+
3. When a user visit any path that’s not defined in the router, they are redirected to the login page because of the `**` wildcard path definition.
30+
31+
## Understanding `pathMatch`
32+
33+
The `pathMatch` property on routes enables developers to control how Angular matches a URL to routes.
34+
35+
There are two values that `pathMatch` accepts:
36+
37+
| Value | Description |
38+
| ---------- | -------------------------------------------- |
39+
| `'full'` | The entire URL path must match exactly |
40+
| `'prefix'` | Only the beginning of the URL needs to match |
41+
42+
By default, all redirects use the `prefix` strategy.
43+
44+
### `pathMatch: 'prefix'`
45+
46+
`pathMatch: 'prefix'` is the default strategy and ideal when you want Angular Router to match all subsequent routes when triggering a redirect.
47+
48+
```ts
49+
export const routes: Routes = [
50+
// This redirect route is equivalent to…
51+
{ path: 'news', redirectTo: 'blog },
52+
53+
// This explicitly defined route redirect pathMatch
54+
{ path: 'news', redirectTo: 'blog', pathMatch: 'prefix' },
55+
];
56+
```
57+
58+
In this example, all routes that are prefixed with `news` are redirected to their `/blog` equivalents. Here are some examples where users are redirected when visiting the old `news` prefix:
59+
60+
- `/news` redirects to `/blog`
61+
- `/news/article` redirects to `/blog/article`
62+
- `/news/article/:id` redirects to `/blog/article/:id`
63+
64+
### `pathMatch: 'full'`
65+
66+
On the other hand, `pathMatch: 'full'` is useful when you want Angular Router to only redirect a specific path.
67+
68+
```ts
69+
export const routes: Routes = [
70+
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
71+
];
72+
```
73+
74+
In this example, any time the user visits the root URL (i.e., `''`), the router redirects that user to the `'/dashboard'` page.
75+
76+
Any subsequent pages (e.g., `/login`, `/about`, `/product/id`, etc.), are ignored and do not trigger a redirect.
77+
78+
TIP: Be careful when configuring a redirect on the root page (i.e., `"/"` or `""`). If you do not set `pathMatch: 'full'`, the router will redirect all URLs.
79+
80+
To further illustrate this, if the `news` example from the previous section used `pathMatch: 'full'` instead:
81+
82+
```ts
83+
export const routes: Routes = [
84+
{ path: 'news', redirectTo: '/blog', pathMatch: 'full' },
85+
];
86+
```
87+
88+
This means that:
89+
90+
1. Only the `/news` path will be redirected to `/blog`.
91+
2. Any subsequent segments such as `/news/articles` or `/news/articles/1` would not redirect with the new `/blog` prefix.
92+
93+
## Conditional redirects
94+
95+
The `redirectTo` property can also accept a function in order to add logic to how users are redirected.
96+
97+
The [function](api/router/RedirectFunction) only has access part of the [`ActivatedRouteSnapshot`](api/router/ActivatedRouteSnapshot) data since some data is not accurately known at the route matching phase. Examples include: resolved titles, lazy loaded components, etc.
98+
99+
It typically returns a string or [`URLTree`](api/router/UrlTree), but it can also return an observable or promise.
100+
101+
Here is an example where the user is redirected to different menu based on the time of the day:
102+
103+
```ts
104+
import { Routes } from '@angular/router';
105+
import { MenuComponent } from './menu/menu.component';
106+
107+
export const routes: Routes = [
108+
{
109+
path: 'restaurant/:location/menu',
110+
redirectTo: (activatedRouteSnapshot) => {
111+
const location = activatedRouteSnapshot.params['location'];
112+
const currentHour = new Date().getHours();
113+
114+
// Check if user requested a specific meal via query parameter
115+
if (activatedRouteSnapshot.queryParams['meal']) {
116+
return `/restaurant/${location}/menu/${queryParams['meal']}`;
117+
}
118+
119+
// Auto-redirect based on time of day
120+
if (currentHour >= 5 && currentHour < 11) {
121+
return `/restaurant/${location}/menu/breakfast`;
122+
} else if (currentHour >= 11 && currentHour < 17) {
123+
return `/restaurant/${location}/menu/lunch`;
124+
} else {
125+
return `/restaurant/${location}/menu/dinner`;
126+
}
127+
}
128+
},
129+
130+
// Destination routes
131+
{ path: 'restaurant/:location/menu/breakfast', component: MenuComponent },
132+
{ path: 'restaurant/:location/menu/lunch', component: MenuComponent },
133+
{ path: 'restaurant/:location/menu/dinner', component: MenuComponent },
134+
135+
// Default redirect
136+
{ path: '', redirectTo: '/restaurant/downtown/menu', pathMatch: 'full' }
137+
];
138+
```
139+
140+
To learn more, check out [the API docs for the RedirectFunction](api/router/RedirectFunction).
141+
142+
## Next steps
143+
144+
For more information about the `redirectTo` property, check out the [API docs](api/router/Route#redirectTo).

‎adev-ja/src/content/guide/routing/redirecting-routes.md

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Redirecting Routes
1+
# ルートのリダイレクト
22

3-
Route redirects allow you to automatically navigate users from one route to another. Think of it like mail forwarding, where mail intended for one address is sent to a different address. This is useful for handling legacy URLs, implementing default routes, or managing access control.
3+
ルートのリダイレクトを使用すると、ユーザーをあるルートから別のルートへ自動的にナビゲートできます。ある住所宛の郵便物が別の住所に転送される郵便転送のように考えてください。これは、レガシーURLの処理、デフォルトルートの実装、またはアクセスコントロールの管理に役立ちます。
44

5-
## How to configure redirects
5+
## リダイレクトの設定方法 {#how-to-configure-redirects}
66

7-
You can define redirects in your route configuration with the `redirectTo` property. This property accepts a string.
7+
ルート設定で`redirectTo`プロパティを使用してリダイレクトを定義できます。このプロパティは文字列を受け入れます。
88

99
```ts
1010
import { Routes } from '@angular/router';
@@ -22,28 +22,28 @@ const routes: Routes = [
2222
];
2323
```
2424

25-
In this example, there are three redirects:
25+
この例では、3つのリダイレクトがあります。
2626

27-
1. When a user visits the `/marketing` path, they are redirected to `/newsletter`.
28-
2. When a user visits any `/legacy-user/:id` path, they are routed to the corresponding `/users/:id` path.
29-
3. When a user visit any path that’s not defined in the router, they are redirected to the login page because of the `**` wildcard path definition.
27+
1. ユーザーが`/marketing`パスにアクセスすると、`/newsletter`にリダイレクトされます。
28+
2. ユーザーが`/legacy-user/:id`パスにアクセスすると、対応する`/users/:id`パスにルーティングされます。
29+
3. ユーザーがルーターで定義されていないパスにアクセスすると、`**`ワイルドカードパス定義によりログインページにリダイレクトされます。
3030

31-
## Understanding `pathMatch`
31+
## `pathMatch`の理解
3232

33-
The `pathMatch` property on routes enables developers to control how Angular matches a URL to routes.
33+
`pathMatch`プロパティは、AngularがURLをルートにどのように一致させるかを開発者が制御できるようにします。
3434

35-
There are two values that `pathMatch` accepts:
35+
`pathMatch`が受け入れる値は2つあります。
3636

37-
| Value | Description |
37+
| 値 | 説明 |
3838
| ---------- | -------------------------------------------- |
39-
| `'full'` | The entire URL path must match exactly |
40-
| `'prefix'` | Only the beginning of the URL needs to match |
39+
| `'full'` | URLパス全体が完全に一致する必要があります |
40+
| `'prefix'` | URLの先頭のみが一致する必要があります |
4141

42-
By default, all redirects use the `prefix` strategy.
42+
デフォルトでは、すべてのリダイレクトは`prefix`戦略を使用します。
4343

44-
### `pathMatch: 'prefix'`
44+
### `pathMatch: 'prefix'` {#pathmatch-prefix}
4545

46-
`pathMatch: 'prefix'` is the default strategy and ideal when you want Angular Router to match all subsequent routes when triggering a redirect.
46+
`pathMatch: 'prefix'`はデフォルトの戦略であり、リダイレクトをトリガーするときにAngular Routerが後続のすべてのルートに一致させたい場合に理想的です。
4747

4848
```ts
4949
export const routes: Routes = [
@@ -55,50 +55,50 @@ export const routes: Routes = [
5555
];
5656
```
5757
58-
In this example, all routes that are prefixed with `news` are redirected to their `/blog` equivalents. Here are some examples where users are redirected when visiting the old `news` prefix:
58+
この例では、`news`でプレフィックスされたすべてのルートは、対応する`/blog`にリダイレクトされます。以下は、ユーザーが古い`news`プレフィックスにアクセスしたときにリダイレクトされる例です。
5959
60-
- `/news` redirects to `/blog`
61-
- `/news/article` redirects to `/blog/article`
62-
- `/news/article/:id` redirects to `/blog/article/:id`
60+
- `/news` は `/blog` にリダイレクトされます
61+
- `/news/article` は `/blog/article` にリダイレクトされます
62+
- `/news/article/:id` は `/blog/article/:id` にリダイレクトされます
6363
64-
### `pathMatch: 'full'`
64+
### `pathMatch: 'full'` {#pathmatch-full}
6565
66-
On the other hand, `pathMatch: 'full'` is useful when you want Angular Router to only redirect a specific path.
66+
一方、`pathMatch: 'full'`は、Angular Routerに特定のパスのみをリダイレクトさせたい場合に役立ちます。
6767
6868
```ts
6969
export const routes: Routes = [
7070
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
7171
];
7272
```
7373
74-
In this example, any time the user visits the root URL (i.e., `''`), the router redirects that user to the `'/dashboard'` page.
74+
この例では、ユーザーがルートURL（つまり`''`）にアクセスするたびに、ルーターはそのユーザーを`'/dashboard'`ページにリダイレクトします。
7575
76-
Any subsequent pages (e.g., `/login`, `/about`, `/product/id`, etc.), are ignored and do not trigger a redirect.
76+
後続のページ（例: `/login`、`/about`、`/product/id`など）は無視され、リダイレクトはトリガーされません。
7777
78-
TIP: Be careful when configuring a redirect on the root page (i.e., `"/"` or `""`). If you do not set `pathMatch: 'full'`, the router will redirect all URLs.
78+
TIP: ルートページ（つまり`"/"`または`""`）でリダイレクトを設定する際は注意してください。`pathMatch: 'full'`を設定しない場合、ルーターはすべてのURLをリダイレクトします。
7979
80-
To further illustrate this, if the `news` example from the previous section used `pathMatch: 'full'` instead:
80+
これをさらに説明するために、前のセクションの`news`の例で`pathMatch: 'full'`を使用した場合：
8181
8282
```ts
8383
export const routes: Routes = [
8484
{ path: 'news', redirectTo: '/blog', pathMatch: 'full' },
8585
];
8686
```
8787
88-
This means that:
88+
これは次のことを意味します。
8989
90-
1. Only the `/news` path will be redirected to `/blog`.
91-
2. Any subsequent segments such as `/news/articles` or `/news/articles/1` would not redirect with the new `/blog` prefix.
90+
1. `/news`パスのみが`/blog`にリダイレクトされます。
91+
2. `/news/articles`や`/news/articles/1`のような後続のセグメントは、新しい`/blog`プレフィックスでリダイレクトされません。
9292
93-
## Conditional redirects
93+
## 条件付きリダイレクト {#conditional-redirects}
9494
95-
The `redirectTo` property can also accept a function in order to add logic to how users are redirected.
95+
`redirectTo`プロパティは、ユーザーがリダイレクトされる方法にロジックを追加するために、関数を受け入れることもできます。
9696
97-
The [function](api/router/RedirectFunction) only has access part of the [`ActivatedRouteSnapshot`](api/router/ActivatedRouteSnapshot) data since some data is not accurately known at the route matching phase. Examples include: resolved titles, lazy loaded components, etc.
97+
[関数](api/router/RedirectFunction)は、ルートマッチングフェーズでは一部のデータが正確に不明であるため、[`ActivatedRouteSnapshot`](api/router/ActivatedRouteSnapshot)データの一部のみにアクセスできます。例としては、解決されたタイトル、遅延読み込みされたコンポーネントなどがあります。
9898
99-
It typically returns a string or [`URLTree`](api/router/UrlTree), but it can also return an observable or promise.
99+
通常、文字列または[`URLTree`](api/router/UrlTree)を返しますが、observableまたはpromiseを返すこともできます。
100100
101-
Here is an example where the user is redirected to different menu based on the time of the day:
101+
以下は、時間帯に基づいてユーザーが異なるメニューにリダイレクトされる例です。
102102
103103
```ts
104104
import { Routes } from '@angular/router';
@@ -137,8 +137,8 @@ export const routes: Routes = [
137137
];
138138
```
139139
140-
To learn more, check out [the API docs for the RedirectFunction](api/router/RedirectFunction).
140+
詳細については、[RedirectFunctionのAPIドキュメント](api/router/RedirectFunction)を参照してください。
141141
142-
## Next steps
142+
## 次のステップ {#next-steps}
143143
144-
For more information about the `redirectTo` property, check out the [API docs](api/router/Route#redirectTo).
144+
`redirectTo`プロパティの詳細については、[APIドキュメント](api/router/Route#redirectTo)を参照してください。

0 commit comments

Comments
 (0)