title: Blazor routing and layout when inside an area
body: <p>I have an existing MVC project and I am trying to integrate Blazor into it. To do this I had to upgrade from .NET Core 2.1 to 3.1 and change a few things in my startup class to get the application working as it was before. </p>
  
  <p>After sorting all the upgrade stuff out, I've now added the hub  to my <code>Configure</code> startup method:</p>
  
  <pre><code>...
  
  app.UseEndpoints(endpoints =&gt;
  {
      endpoints.MapControllerRoute(
          name: "areas",
          pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
  
      endpoints.MapControllerRoute(
          name: "default",
          pattern: "{controller=Home}/{action=Index}/{id?}");
  
      endpoints.MapControllers();
      endpoints.MapRazorPages();
      endpoints.MapBlazorHub();
  });
  </code></pre>
  
  <p>... and the server sign Blazor services registration:</p>
  
  <pre><code>...
  
  services
      .AddMvc(options =&gt;
      {
          ...
      })
      .AddRazorOptions(o =&gt;
      {
          ...
      })
      .AddRazorPagesOptions(options =&gt;
      {
          ...
      });
  
  services.AddServerSideBlazor();
  </code></pre>
  
  <p>Finally, I've added the Blazor JS script to my <code>~/Pages/Shared/_Layout.cshtml</code> view:</p>
  
  <pre><code>&lt;script src="~/_framework/blazor.server.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I'm struggling to figure out what the <code>@page</code> value should be for a new Razor Component when the component is within a view.</p>
  
  <p>Here is my folder structure:</p>
  
  <p><a href="https://i.stack.imgur.com/lqZ1x.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lqZ1x.png" alt="enter image description here"></a></p>
  
  <p>Everything inside the <code>Pages</code> folder is new.</p>
  
  <p>Here is the contents of <code>Index.razor</code>:</p>
  
  <pre><code>@page "/"
  
  &lt;h3&gt;Sales Homepage&lt;/h3&gt;
  
  @code {
  
  }
  </code></pre>
  
  <p>I've tried the following for the <code>@page</code> route value:</p>
  
  <ul>
  <li>"/"</li>
  <li>"/Index"</li>
  <li>"/Pricing/Sales/"</li>
  <li>"/Pricing/Sales/Index"</li>
  </ul>
  
  <p>None of these have worked - I just get a page not found error.</p>
  
  <p>I'm also not sure how I'm supposed to use my existing layout in <code>~/Pages/Shared/_Layout.cshtml</code> with these new components.</p>
  
  <p>I've had a look at the scaffolded Blazor template project in Visual Studio and also checked the docs but haven't found this particularly useful as it's all focused on brand new Blazor projects.</p>