ASP.NET Core Blazor のルーティングASP.NET Core Blazor routing

作成者: Luke LathamBy Luke Latham

Blazor アプリで、要求をルーティングする方法と、NavLink コンポーネントを使用してナビゲーション リンクを作成する方法について説明します。Learn how to route requests and how to use the NavLink component to create navigation links in Blazor apps.

ASP.NET Core エンドポイントのルーティングの統合ASP.NET Core endpoint routing integration

Blazor サーバーは ASP.NET Core エンドポイントのルーティングに統合されています。 Server is integrated into ASP.NET Core Endpoint Routing. ASP.NET Core アプリは、Startup.ConfigureMapBlazorHub を使用して、対話型コンポーネントの着信接続を受け入れるように構成します。An ASP.NET Core app is configured to accept incoming connections for interactive components with MapBlazorHub in Startup.Configure:

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

最も一般的な構成は、すべての要求を Razor ページにルーティングすることです。これは、Blazor サーバー アプリのサーバー側部分のホストとして機能します。The most typical configuration is to route all requests to a Razor page, which acts as the host for the server-side part of the Blazor Server app. 通常、ホスト ページは、 _Host.cshtml という名前になります。By convention, the host page is usually named _Host.cshtml. ホスト ファイルに指定されるルートは、ルート照合で低い優先順位で動作するため、フォールバック ルートと呼ばれます。The route specified in the host file is called a fallback route because it operates with a low priority in route matching. フォールバック ルートは、他のルートが一致しない場合に考慮されます。The fallback route is considered when other routes don't match. これにより、Blazor サーバー アプリと干渉することなく、他のコントローラーやページをアプリで使用できます。This allows the app to use others controllers and pages without interfering with the Blazor Server app.

ルート テンプレートRoute templates

Router コンポーネントでは、指定されたルートによる各コンポーネントへのルーティングが可能になります。The Router component enables routing to each component with a specified route. Router コンポーネントは App.razor ファイルに表示されます。The Router component appears in the App.razor file:

<Router AppAssembly="typeof(Startup).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

@page ディレクティブを含む razor ファイルがコンパイルされると、生成されたクラスに、ルート テンプレートを指定する RouteAttribute が指定されます。When a .razor file with an @page directive is compiled, the generated class is provided a RouteAttribute specifying the route template.

実行時に、RouteView コンポーネントは、At runtime, the RouteView component:

  • Router から、必要なパラメーターと共に RouteData を受け取ります。Receives the RouteData from the Router along with any desired parameters.
  • 指定されたパラメーターを使用して、指定されたコンポーネントを、そのレイアウト (または任意の既定のレイアウト) でレンダリングします。Renders the specified component with its layout (or an optional default layout) using the specified parameters.

必要に応じて、レイアウト クラスで DefaultLayout パラメーターを指定して、レイアウトを指定しないコンポーネントに使用できます。You can optionally specify a DefaultLayout parameter with a layout class to use for components that don't specify a layout. 既定の Blazor テンプレートでは、MainLayout コンポーネントを指定しています。The default Blazor templates specify the MainLayout component. MainLayout.razor は、テンプレート プロジェクトの Shared フォルダーにあります。MainLayout.razor is in the template project's Shared folder. レイアウトの詳細については、「<xref:blazor/layouts>」を参照してください。For more information on layouts, see <xref:blazor/layouts>.

コンポーネントには、複数のルート テンプレートを適用できます。Multiple route templates can be applied to a component. 次のコンポーネントは、/BlazorRoute/DifferentBlazorRoute に対する要求に応答します。The following component responds to requests for /BlazorRoute and /DifferentBlazorRoute:

@page "/BlazorRoute"
@page "/DifferentBlazorRoute"

<h1>Blazor routing</h1>

重要

URL が正しく解決されるように、アプリでは、href 属性に指定されているアプリのベース パス (<base href="/">) を使用して、その wwwroot/index.html ファイル (Blazor WebAssembly) または Pages/_Host.cshtml ファイル (Blazor サーバー) に <base> タグを含める必要があります。For URLs to resolve correctly, the app must include a <base> tag in its wwwroot/index.html file (Blazor WebAssembly) or Pages/_Host.cshtml file (Blazor Server) with the app base path specified in the href attribute (<base href="/">). 詳細については、「ASP.NET Core Blazor のホストと展開」を参照してください。For more information, see ASP.NET Core Blazor のホストと展開.

コンテンツが見つからないときにカスタム コンテンツを提供するProvide custom content when content isn't found

Router コンポーネントを使用すると、要求されたルートでコンテンツが見つからない場合に、アプリでカスタム コンテンツを指定できます。The Router component allows the app to specify custom content if content isn't found for the requested route.

App.razor ファイルで、Router コンポーネントの NotFound テンプレート パラメーターにカスタム コンテンツを設定します。In the App.razor file, set custom content in the NotFound template parameter of the Router component:

<Router AppAssembly="typeof(Startup).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <h1>Sorry</h1>
        <p>Sorry, there's nothing at this address.</p> b
    </NotFound>
</Router>

<NotFound> タグのコンテンツには、他の対話型コンポーネントなど、任意の項目を含めることができます。The content of <NotFound> tags can include arbitrary items, such as other interactive components. NotFound コンテンツに既定のレイアウトを適用するには、「<xref:blazor/layouts>」を参照してください。To apply a default layout to NotFound content, see <xref:blazor/layouts>.

複数のアセンブリからコンポーネントにルーティングするRoute to components from multiple assemblies

AdditionalAssemblies パラメーターを使用して、Router コンポーネントで、ルーティング可能なコンポーネントを検索するときに考慮する追加のアセンブリを指定します。Use the AdditionalAssemblies parameter to specify additional assemblies for the Router component to consider when searching for routable components. 指定されたアセンブリは、AppAssembly に指定されたアセンブリに加えて考慮されます。Specified assemblies are considered in addition to the AppAssembly-specified assembly. 次の例では、Component1 は、参照されているクラス ライブラリに定義されているルーティング可能なコンポーネントです。In the following example, Component1 is a routable component defined in a referenced class library. 次の AdditionalAssemblies の例では、Component1 のルーティング サポートの結果を示しています。The following AdditionalAssemblies example results in routing support for Component1:

<Router
    AppAssembly="typeof(Program).Assembly"
    AdditionalAssemblies="new[] { typeof(Component1).Assembly }">
    ...
</Router>

ルート パラメーターRoute parameters

ルーターは、ルート パラメーターを使用して、同じ名前の対応するコンポーネント パラメーターを設定します (大文字と小文字は区別されません)。The router uses route parameters to populate the corresponding component parameters with the same name (case insensitive):

@page "/RouteParameter"
@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string Text { get; set; }

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

省略可能なパラメーターはサポートされていません。Optional parameters aren't supported. 前の例では、2 つの @page ディレクティブが適用されています。Two @page directives are applied in the previous example. 1 つ目は、パラメーターを指定せずにコンポーネントへの移動を許可します。The first permits navigation to the component without a parameter. 2 番目の @page ディレクティブは、{text} ルート パラメーターを受け取り、その値を Text プロパティに割り当てます。The second @page directive takes the {text} route parameter and assigns the value to the Text property.

ルート制約Route constraints

ルート制約は、コンポーネントへのルート セグメントに型の一致を適用します。A route constraint enforces type matching on a route segment to a component.

次の例で、Users コンポーネントへのルートは、次の場合にのみ一致します。In the following example, the route to the Users component only matches if:

  • 要求 URL に Id ルート セグメントが存在する。An Id route segment is present on the request URL.
  • Id セグメントは整数 (int) である。The Id segment is an integer (int).
@page "/Users/{Id:int}"

<h1>The user Id is @Id!</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

次の表に示すルート制約を使用できます。The route constraints shown in the following table are available. インバリアント カルチャと一致するルート制約については、表の下の警告で詳細を確認してください。For the route constraints that match with the invariant culture, see the warning below the table for more information.

| 制約Constraint | Example | 一致の例Example Matches | インバリアントInvariant
カルチャculture
一致matching | | --- title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'
  • 'Identity''Identity'
  • 'Let's Encrypt''Let's Encrypt'
  • 'Razor''Razor'
  • 'SignalR' uid:'SignalR' uid:

----- | --- title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:----- | --- title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'
  • 'Identity''Identity'
  • 'Let's Encrypt''Let's Encrypt'
  • 'Razor''Razor'
  • 'SignalR' uid:'SignalR' uid:

--------- | --- title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:--------- | --- title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'
  • 'Identity''Identity'
  • 'Let's Encrypt''Let's Encrypt'
  • 'Razor''Razor'
  • 'SignalR' uid:'SignalR' uid:

---------------------------------------- | :--- title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:---------------------------------------- | :--- title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'
  • 'Identity''Identity'
  • 'Let's Encrypt''Let's Encrypt'
  • 'Razor''Razor'
  • 'SignalR' uid:'SignalR' uid:

---------------: | | bool | {active:bool} | true, FALSE | いいえ | | datetime | {dob:datetime} | 2016-12-31, 2016-12-31 7:32pm | はい | | decimal | {price:decimal} | 49.99, -1,000.01 | はい | | double | {weight:double} | 1.234, -1,001.01e8 | はい | | float | {weight:float} | 1.234, -1,001.01e8 | はい | | guid | {id:guid} | CD2C1638-1638-72D5-1638-DEADBEEF1638, {CD2C1638-1638-72D5-1638-DEADBEEF1638} | いいえ | | int | {id:int} | 123456789, -123456789 | はい | | long | {ticks:long} | 123456789, -123456789 | はい |---------------: | | bool | {active:bool} | true, FALSE | No | | datetime | {dob:datetime} | 2016-12-31, 2016-12-31 7:32pm | Yes | | decimal | {price:decimal} | 49.99, -1,000.01 | Yes | | double | {weight:double} | 1.234, -1,001.01e8 | Yes | | float | {weight:float} | 1.234, -1,001.01e8 | Yes | | guid | {id:guid} | CD2C1638-1638-72D5-1638-DEADBEEF1638, {CD2C1638-1638-72D5-1638-DEADBEEF1638} | No | | int | {id:int} | 123456789, -123456789 | Yes | | long | {ticks:long} | 123456789, -123456789 | Yes |

警告

URL の妥当性を検証し、CLR 型 (intDateTime など) に変換されるルート制約では、常にインバリアント カルチャが使用されます。Route constraints that verify the URL and are converted to a CLR type (such as int or DateTime) always use the invariant culture. これらの制約では、URL がローカライズ不可であることが前提となります。These constraints assume that the URL is non-localizable.

ドットを含む URL によるルーティングRouting with URLs that contain dots

Blazor サーバー アプリでは、 _Host.cshtml の既定のルートは / (@page "/") です。In Blazor Server apps, the default route in _Host.cshtml is / (@page "/"). ドット (.) を含む要求 URL は、既定のルートによって照合されません。URL がファイルを要求しているように見えるためです。A request URL that contains a dot (.) isn't matched by the default route because the URL appears to request a file. Blazor アプリにより、存在しない静的ファイルに対して "404 見つかりません" 応答が返されます。A Blazor app returns a 404 - Not Found response for a static file that doesn't exist. ドットを含むルートを使用するには、次のルート テンプレートを使用して _Host.cshtml を構成します。To use routes that contain a dot, configure _Host.cshtml with the following route template:

@page "/{**path}"

"/{**path}" テンプレートには次のものが含まれます。The "/{**path}" template includes:

  • 二重アスタリスクのキャッチオール構文 (**)。スラッシュ (/) をエンコードせずに複数のフォルダー境界をまたがるパスをキャプチャします。Double-asterisk catch-all syntax (**) to capture the path across multiple folder boundaries without encoding forward slashes (/).
  • path ルート パラメーター名。path route parameter name.

注意

"キャッチオール" パラメーター構文 (*/**) は、Razor コンポーネント ( .razor) ではサポートされていませんCatch-all parameter syntax (*/**) is not supported in Razor components (.razor).

詳細については、「<xref:fundamentals/routing>」を参照してください。For more information, see <xref:fundamentals/routing>.

ナビゲーション リンクを作成するときは、HTML ハイパーリンク要素 (<a>) の代わりに NavLink コンポーネントを使用します。Use a NavLink component in place of HTML hyperlink elements (<a>) when creating navigation links. NavLink コンポーネントは <a> 要素のように動作しますが、href が現在の URL と一致するかどうかに基づいて active CSS クラスを切り替える点が異なります。A NavLink component behaves like an <a> element, except it toggles an active CSS class based on whether its href matches the current URL. active クラスは、表示されているナビゲーション リンクの中でどのページがアクティブ ページであるかをユーザーが理解するのに役立ちます。The active class helps a user understand which page is the active page among the navigation links displayed.

次の NavMenu コンポーネントでは、NavLink コンポーネントの使用方法を示すブートストラップ ナビゲーション バーを作成しています。The following NavMenu component creates a Bootstrap navigation bar that demonstrates how to use NavLink components:

<div class="@NavMenuCssClass" @onclick="@ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="MyComponent" Match="NavLinkMatch.Prefix">
                <span class="oi oi-plus" aria-hidden="true"></span> My Component
            </NavLink>
        </li>
    </ul>
</div>

<NavLink> 要素の Match 属性に割り当てられる 2 つの NavLinkMatch オプションがあります。There are two NavLinkMatch options that you can assign to the Match attribute of the <NavLink> element:

前の例では、ホーム NavLink href="" はホーム URL と一致し、アプリの既定のベース パス URL (https://localhost:5001/ など) でのみ active CSS クラスを受け取ります。In the preceding example, the Home NavLink href="" matches the home URL and only receives the active CSS class at the app's default base path URL (for example, https://localhost:5001/). 2 番目の NavLink は、ユーザーが MyComponent プレフィックスを含む任意の URL (https://localhost:5001/MyComponenthttps://localhost:5001/MyComponent/AnotherSegment など) にアクセスしたときに、active クラスを受け取ります。The second NavLink receives the active class when the user visits any URL with a MyComponent prefix (for example, https://localhost:5001/MyComponent and https://localhost:5001/MyComponent/AnotherSegment).

追加の NavLink コンポーネント属性は、レンダリングされるアンカー タグに渡されます。Additional NavLink component attributes are passed through to the rendered anchor tag. 次の例では、NavLink コンポーネントに target 属性が含まれています。In the following example, the NavLink component includes the target attribute:

<NavLink href="my-page" target="_blank">My page</NavLink>

次の HTML マークアップがレンダリングされます。The following HTML markup is rendered:

<a href="my-page" target="_blank" rel="noopener noreferrer">My page</a>

URI およびナビゲーション状態ヘルパーURI and navigation state helpers

C# コード内の URI とナビゲーションを操作するには、NavigationManager を使用します。Use NavigationManager to work with URIs and navigation in C# code. NavigationManager には、次の表に示すイベントとメソッドがあります。NavigationManager provides the event and methods shown in the following table.

| メンバーMember | 説明Description | | --- title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'
  • 'Identity''Identity'
  • 'Let's Encrypt''Let's Encrypt'
  • 'Razor''Razor'
  • 'SignalR' uid:'SignalR' uid:

--- | --- title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:--- | --- title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'

  • 'Identity''Identity'

  • 'Let's Encrypt''Let's Encrypt'

  • 'Razor''Razor'

  • 'SignalR' uid:'SignalR' uid:

title:'ASP.NET Core Blazor のルーティング' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:title: 'ASP.NET Core Blazor routing' author: description: monikerRange: ms.author: ms.custom: ms.date: no-loc:

  • 'Blazor''Blazor'
  • 'Identity''Identity'
  • 'Let's Encrypt''Let's Encrypt'
  • 'Razor''Razor'
  • 'SignalR' uid:'SignalR' uid:

------ | | Uri | 現在の絶対 URI を取得します。------ | | Uri | Gets the current absolute URI. | | BaseUri | 絶対 URI を生成するために、相対 URI パスの前に付加できるベース URI (末尾のスラッシュを含む) を取得します。| | BaseUri | Gets the base URI (with a trailing slash) that can be prepended to relative URI paths to produce an absolute URI. 通常、BaseUriwwwroot/index.html (Blazor WebAssembly)、または Pages/_Host.cshtml (Blazor サーバー) 内のドキュメントの <base> 要素の href 属性に対応します。Typically, BaseUri corresponds to the href attribute on the document's <base> element in wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server). | | NavigateTo | 指定された URI に移動します。| | NavigateTo | Navigates to the specified URI. forceLoadtrue の場合:If forceLoad is true:

  • クライアント側のルーティングはバイパスされます。Client-side routing is bypassed.
  • URI が通常クライアント側ルーターによって処理されるかどうかにかかわらず、ブラウザーでは、強制的にサーバーから新しいページが読み込まれます。The browser is forced to load the new page from the server, whether or not the URI is normally handled by the client-side router.
| | LocationChanged | ナビゲーションの場所が変更されたときに発生するイベントです。| | LocationChanged | An event that fires when the navigation location has changed. | | ToAbsoluteUri | 相対 URI を絶対 URI に変換します。| | ToAbsoluteUri | Converts a relative URI into an absolute URI. | | ToBaseRelativePath | ベース URI (たとえば、BaseUri によって以前に返された URI) が与えられると、絶対 URI を、ベース URI プレフィックスに相対的な URI に変換します。| | ToBaseRelativePath | Given a base URI (for example, a URI previously returned by BaseUri), converts an absolute URI into a URI relative to the base URI prefix. |

次のコンポーネントは、ボタンが選択されたときに、アプリの Counter コンポーネントに移動します。The following component navigates to the app's Counter component when the button is selected:

@page "/navigate"
@inject NavigationManager NavigationManager

<h1>Navigate in Code Example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        NavigationManager.NavigateTo("counter");
    }
}

次のコンポーネントは、NavigationManager.LocationChanged を設定することにより、場所の変更イベントを処理します。The following component handles a location changed event by setting NavigationManager.LocationChanged. HandleLocationChanged メソッドは、Dispose がフレームワークによって呼び出されると、アンフックになります。The HandleLocationChanged method is unhooked when Dispose is called by the framework. このメソッドをアンフックすることで、コンポーネントのガベージ コレクションが許可されます。Unhooking the method permits garbage collection of the component.

@implements IDisposable
@inject NavigationManager NavigationManager

...

protected override void OnInitialized()
{
    NavigationManager.LocationChanged += HandleLocationChanged;
}

private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
{
    ...
}

public void Dispose()
{
    NavigationManager.LocationChanged -= HandleLocationChanged;
}

LocationChangedEventArgs は、イベントに関する次の情報を提供します。LocationChangedEventArgs provides the following information about the event:

コンポーネントの破棄の詳細については、「<xref:blazor/lifecycle#component-disposal-with-idisposable>」を参照してください。For more information on component disposal, see <xref:blazor/lifecycle#component-disposal-with-idisposable>.