Blazor（詳細）頁面重新加載導致 javascript 錯誤

Question

我為自己構建了一個小型 Blazor 網站，使用一個免費模板，其中包含一堆 javascript 文件。 除了一件事，一切似乎都運行良好。

當用戶重新加載（F5）項目詳情頁面時，所有 html 標記消失，控制台顯示一堆錯誤日志，表明找不到相關的 javascript 文件。 重新加載任何其他頁面都可以正常工作。

這是razor頁面

@page "/project/{Slug}"

@using DOGA.Data
@using DOGA.Services
@inject ProjectService projectService
@inject NavigationManager navigationManager

@if (_project == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <section id="pricing" class="pricing-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="section-title text-center pb-20">
                        <h3 class="title">@_project.Name</h3>
                        <p class="text">
                            @((MarkupString)_project.Description)

                            @if (_project.BulletPointList.Items.Any())
                            {
                                <br />

                                @_project.BulletPointList.Name
                                <br />
                                <br />
                                <ul style="text-align:left;">
                                    @foreach (var item in _project.BulletPointList.Items)
                                    {
                                        <li>
                                            <i class="lni-check-mark-circle"></i> @item
                                        </li>
                                    }

                                </ul>
                            }
                        </p>
                    </div> <!-- section title -->
                </div>
            </div> <!-- row -->
            @foreach (var image in _project.DetailImages)
            {
                <div class="row justify-content-center">
                    <div class="col-lg-12 col-md-7 col-sm-9">
                        <div class="pricing-style-one mt-40 wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.2s">
                            <div class="pricing-header text-center">
                                <h5 class="sub-title">@image.ImageName</h5>
                            </div>
                            <div class="text-center">
                                <img src="@image.ImageLink" alt="@image.ImageName">
                            </div>
                            <div class="text-center top-buffer">
                                <br />
                                @image.ImageDescription
                            </div>
                            @if (image.BulletPoints.Any())
                            {
                                <br />

                                <div class="pricing-list">
                                    <ul>
                                        @foreach (var item in image.BulletPoints)
                                        {
                                            <li><i class="lni-check-mark-circle"></i> @item</li>
                                        }
                                    </ul>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            }
        </div>
    </section>
}

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

    private Project _project { get; set; }

    protected override async Task OnInitializedAsync()
    {
        _project = await projectService.GetProjectAsync(Slug);

        if (_project == null)
        {
            navigationManager.NavigateTo("/");
        }
    }
}

該錯誤出現在本地和已發布的 azure 站點上。

該站點目前部署在 azure 上。 請注意，它是荷蘭語。 進入投資組合頁面時出現錯誤，單擊三個項目之一，然后硬刷新。 https://dogasolutions.azurewebsites.net/

編輯：通過添加“/”（感謝 gsharp）修復引用后，頁面似乎重新加載正常，除了 blazor javascript 文件。

在body標簽里面的_host.cshtml：

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

<script src="/_framework/blazor.server.js"></script>

Answer 1

我發現了罪魁禍首是什么。 我使用了一個在線模板來替換我的大部分_Host.cshtml文件。 通過這樣做，我覆蓋了我的head標簽中的base標簽。

只需在我的head標簽中添加以下代碼即可完全解決問題。

<base href="~/" />

沒有這個，blazor 在進入詳細頁面（例如域/頁面/{參數}）時無法正確解析連接