更改 BlazorWebAssembly 中的默认页面不起作用

Question

使用 Visual Studio 2019，我创建了一个 Blazor Web Assembly 项目。

我想将 index.html 页面用于其他用途，因此我从中删除了 <app></app> 标签。

然后创建了另一个名为 dashboard.html 的页面并添加了一个 dashboard.razor 页面。在此页面中添加了 @page "/dashboard" 和 <app></app> 标签。

现在，当我从 index.html 导航到 dashboard.html 时，收到消息“there is nothing at this address"

如何将 dashboard.html 页面设为我的应用程序主页面？

最欣赏的任何想法。

项目属性如下所示：

Answer 1

要获得此运行，我建议您从 Blazor 模板设置一个空白的 WASM 项目。获得它后运行您可以对项目进行必要的更改。（我的项目叫做Blazor.Starter.WASM。）

将 Client 项目 wwwroot 移动到 Server 项目。

复制index.html到dashboard.html - 这里是 serverproject/wwwroot/dashboard.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor.Starter.WASM</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="Blazor.Starter.WASM.Client.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="/site.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

我的简单 index.html 看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor.Starter.WASM</title>
    <base href="/"/>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="m-4 p-4">
        <a href="/dashboard">Go to Dashboard</a>
    </div>
</body>
</html>

Index.razor 看起来像这样。注意两个页面引用

@page "/"
@page "/dashboard/"

<h1>Hello, world!</h1>
    Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

@code {
}

Counter.razor 和 SPA 中的所有其他页面 - 添加 @page "/dashboard/nnnnn"

@page "/counter"
@page "/dashboard/counter"
.....

NavMenu.razor 看起来像这样（更改 hrefs）：

.....
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="dashboard" 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="dashboard/counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="dashboard/fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
......

最后更新 Startup.cs 服务器项目。

....
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebAssemblyDebugging();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseBlazorFrameworkFiles();
            app.UseStaticFiles();

           // New section to map all requests starting with /dashboard to the Blazor Wasm project
            app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/dashboard"), app1 =>
            {
                app1.UseRouting();
                app1.UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                    endpoints.MapControllers();
                    endpoints.MapFallbackToFile("dashboard.html");
                });

            });

            // default endpoint
            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapControllers();
                endpoints.MapFallbackToFile("index.html");
            });
        }
    }
}

如果我的这些说明正确无误，应用程序应该从简单索引页开始。进入 WASM 后，尝试按 F5 检查端点映射是否正常工作 - 注意 SPA 中的所有 @page 引用必须以 /dashboard 为前缀，以确保 F5 重新加载正常。

更改 BlazorWebAssembly 中的默认页面不起作用

Changing the default page in BlazorWebAssembly not working

c#

blazor

blazor-webassembly