Navigating to Blazor page with parameter does not render layout or anything

问题

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

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

Page is https://www.pepclublocker.com/news-posts/1 if curious.

What do i do to fix this?

回答1:

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>

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>

来源：https://stackoverflow.com/questions/59833137/navigating-to-blazor-page-with-parameter-does-not-render-layout-or-anything

标签

blazor

blazor-server-side