在带动态URL的ASP.NET Core MVC视图中加载Blazor组件遇404错误

核心问题 #

你遇到的404错误，本质是动态多级URL下的相对路径解析错误：
当页面URL是/myBooks/Details/39这种二级路径时，blazor.webassembly.js会默认以当前页面的路径为基准，去请求_framework/blazor.boot.json，实际请求的地址是/myBooks/Details/_framework/blazor.boot.json——而这个路径根本不存在，自然返回404。其他一级路径（比如/myBooks/）或者根路径页面能正常工作，是因为它们的相对路径解析刚好命中了实际的资源位置。

解决方案 #

针对你的场景，推荐两种靠谱的解决方式：

方式1：给Blazor脚本指定资源路径参数

直接在引入blazor.webassembly.js时，通过data-boot-resource-path参数告诉脚本去哪里找blazor.boot.json等框架资源。假设你把Blazor的_framework目录放在了网站根目录（或者复制到了MVC项目的wwwroot/_framework下），修改脚本代码如下：

<div class="row">
    <component type="typeof(LiteraFlow.UI.Pages.ChaptersView)" render-mode="WebAssembly"></component>
    <script src="~/js/blazor.webassembly/blazor.webassembly.js" data-boot-resource-path="/_framework/"></script>
</div>

如果你的_framework目录是和blazor.webassembly.js放在一起的（即wwwroot/js/blazor.webassembly/_framework），那参数值改成/js/blazor.webassembly/_framework/即可。

方式2：手动初始化Blazor，指定BaseUrl

把脚本的自动启动关闭，然后手动初始化并指定框架资源的绝对路径，灵活性更高：

<div class="row">
    <component type="typeof(LiteraFlow.UI.Pages.ChaptersView)" render-mode="WebAssembly"></component>
    <script src="~/js/blazor.webassembly/blazor.webassembly.js" autostart="false"></script>
    <script>
        Blazor.start({
            config: {
                baseUrl: "/" // 替换为你的_framework所在的绝对路径
            }
        });
    </script>
</div>

额外注意事项 #

• 确保你已经把Blazor WebAssembly项目_framework目录下的所有文件（包括blazor.boot.json、各种.dll、.pdb文件等）都复制到了MVC项目的对应位置，只复制blazor.webassembly.js是不够的。
• 不要在_Layout.cshtml全局引入Blazor脚本，因为会导致多个页面重复初始化Blazor，引发冲突错误，保持在需要使用Blazor组件的视图中单独引入即可。

内容的提问来源于stack exchange，提问作者Pody