使用参数导航到 Blazor 页面不会呈现布局或任何内容答案

【问题标题】：Navigating to Blazor page with parameter does not render layout or anything使用参数导航到 Blazor 页面不会呈现布局或任何内容
【发布时间】：2020-01-21 22:10:06
【问题描述】：

所以我在 Blazor 应用程序中创建了一个页面 - 它从数据库加载博客故事 - 如果没有选择则加载默认的 - 没什么大不了的

如果我直接使用故事的参数 id 导航到此页面 - 没有 Host 或 mainlayout - 所以没有任何样式等被应用或呈现

如果好奇的话，页面是https://www.pepclublocker.com/news-posts/1。

我该怎么做才能解决这个问题？

【问题讨论】：

标签： blazor blazor-server-side

【解决方案1】：

您的 html head 中缺少 <base href="/" />标签，因此 Blazor 在 /new-post 中查找脚本但找不到任何内容。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Pep Club Locker - Team Apparel Printers & Shop </title>
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/business-frontpage.css" rel="stylesheet">
</head>
<body>
...
<!--Blazor:{"prerenderId":"4ae18037ad8d4418b898ea9715bbefab"}-->
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/Blazor-Analytics/blazor-analytics.js"></script>
    <script src="_content/Blazor-Facebook-Analytics/interop.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>

在_Host.cshtml 的head 中添加<base href="~/" /> 标签应该可以解决您的问题。

_Host.cshtml

<head>
    <base href="~/" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Pep Club Locker - Team Apparel Printers & Shop </title>
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/business-frontpage.css" rel="stylesheet">
</head>

【讨论】：