Component tag does not render blazor component when the razor page is not directly in the pages folder

Question

I an trying to render a blazor component in a razor page. My project is ASP.NET Core Web App. I am primarily using razor pages. I have been successful rendering a blazor component when the razor page is in the Pages folder such as in the Privacy page, but when I added a razor page to a subfolder in the Pages folder, it does not work anymore.

I have been following this link. It works. Just not when the razor page is in a folder within the Pages folder. Using Blazor Components In An Existing MVC Application

This is my cshtml code.

<component type="typeof(HelloWorld.Pages.Components.Counter)" render-mode="Server" />

Answer 1

Instead of adding the blazor script on each page, I added two things in the _Layout.cshtml page.

In the head tag

<base href="~/" /> 
<component type="typeof(HeadOutlet)" render-mode="Server" />

Below the footer tag

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