使用参数导航到Blazor页面不会呈现布局或任何内容 [英] Navigating to Blazor page with parameter does not render layout or anything
问题描述
所以我在Blazor应用程序中创建了一个页面-它从数据库加载博客故事-如果没有选择则加载默认页面-没什么大不了
So i created a page in Blazor application - it loads blog stories from database - loads a default one if none are picked - no big deal
如果我直接使用故事的参数ID导航至此页面-没有主机或主布局-因此没有应用任何样式或渲染
If I navigate to this page directly with the parameter id of a story - none of the Host or mainlayout - so none of the styling etc is applied or renders
页面为 https://www.pepclublocker.com/news-posts/1如果好奇.
该如何解决?
推荐答案
HTML head中缺少<base href="/" />标记，因此Blazor在/new-post中查找脚本并且找不到任何内容.
The <base href="/" />tag is missing in your html head, so Blazor look for script in /new-post and can't find anything.
<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="~/" />标记应该可以解决您的问题.
Add the <base href="~/" /> tag in the head of your _Host.cshtml should solved your issue.
_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>
这篇关于使用参数导航到Blazor页面不会呈现布局或任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
