Unify the UX of template projects on navigation to non-existing page

src/Components/Components/src/Routing/Router.cs

@@ -223,7 +223,7 @@ internal virtual void Refresh(bool isNavigationIntercepted)
         var relativePath = NavigationManager.ToBaseRelativePath(_locationAbsolute.AsSpan());
         var locationPathSpan = TrimQueryOrHash(relativePath);
         var locationPath = $"/{locationPathSpan}";
-        Activity? activity = null;
+        Activity? activity;
 
         // In order to avoid routing twice we check for RouteData
         if (RoutingStateProvider?.RouteData is { } endpointRouteData)
@@ -286,7 +286,7 @@ internal virtual void Refresh(bool isNavigationIntercepted)
                 // We did not find a Component that matches the route.
                 // Only show the NotFound content if the application developer programatically got us here i.e we did not
                 // intercept the navigation. In all other cases, force a browser navigation since this could be non-Blazor content.
-                _renderHandle.Render(NotFound ?? DefaultNotFoundContent);
+                RenderNotFound();
             }
             else
             {
@@ -382,25 +382,32 @@ private void OnNotFound(object sender, EventArgs args)
         if (_renderHandle.IsInitialized)
         {
             Log.DisplayingNotFound(_logger);
-            _renderHandle.Render(builder =>
-            {
-                if (NotFoundPage != null)
-                {
-                    builder.OpenComponent(0, NotFoundPage);
-                    builder.CloseComponent();
-                }
-                else if (NotFound != null)
-                {
-                    NotFound(builder);
-                }
-                else
-                {
-                    DefaultNotFoundContent(builder);
-                }
-            });
+            RenderNotFound();
         }
     }
 
+    private void RenderNotFound()
+    {
+        _renderHandle.Render(builder =>
+        {
+            if (NotFoundPage != null)
+            {
+                builder.OpenComponent<RouteView>(0);
+                builder.AddAttribute(1, nameof(RouteView.RouteData),
+                    new RouteData(NotFoundPage, _emptyParametersDictionary));
+                builder.CloseComponent();
+            }
+            else if (NotFound != null)
+            {
+                NotFound(builder);
+            }
+            else
+            {
+                DefaultNotFoundContent(builder);
+            }
+        });
+    }
+
     async Task IHandleAfterRender.OnAfterRenderAsync()
     {
         if (!_navigationInterceptionEnabled)

src/Components/test/E2ETest/ServerRenderingTests/InteractivityTest.cs

@@ -1411,4 +1411,41 @@ public void NavigatesWithInteractivityByRequestRedirection(bool controlFlowByExc
         Browser.Click(By.Id("redirectButton"));
         Browser.Equal("Routing test cases", () => Browser.Exists(By.Id("test-info")).Text);
     }
+
+    [Theory]
+    // prerendering (SSR) is tested in NoInteractivityTest
+    [InlineData("ServerNonPrerendered")]
+    [InlineData("WebAssemblyNonPrerendered")]
+    public void ProgrammaticNavigationToNotExistingPathReExecutesTo404(string renderMode)
+    {
+        Navigate($"{ServerPathBase}/reexecution/redirection-not-found?renderMode={renderMode}&navigate-programmatically=true");
+        Assert404ReExecuted();
+    }
+
+    [Theory]
+    // prerendering (SSR) is tested in NoInteractivityTest
+    [InlineData("ServerNonPrerendered")]
+    [InlineData("WebAssemblyNonPrerendered")]
+    public void LinkNavigationToNotExistingPathReExecutesTo404(string renderMode)
+    {
+        Navigate($"{ServerPathBase}/reexecution/redirection-not-found?renderMode={renderMode}");
+        Browser.Click(By.Id("link-to-not-existing-page"));
+        Assert404ReExecuted();
+    }
+
+    [Theory]
+    // prerendering (SSR) is tested in NoInteractivityTest
+    [InlineData("ServerNonPrerendered")]
+    [InlineData("WebAssemblyNonPrerendered")]
+    public void BrowserNavigationToNotExistingPathReExecutesTo404(string renderMode)
+    {
+        // non-existing path has to have re-execution middleware set up
+        // so it has to have "reexecution" prefix. Otherwise middleware mapping
+        // will not be activated, see configuration in Startup
+        Navigate($"{ServerPathBase}/reexecution/not-existing-page?renderMode={renderMode}");
+        Assert404ReExecuted();
+    }
+
+    private void Assert404ReExecuted() =>
+        Browser.Equal("Welcome On Page Re-executed After Not Found Event", () => Browser.Exists(By.Id("test-info")).Text);
 }

src/Components/test/E2ETest/ServerRenderingTests/NoInteractivityTest.cs

@@ -87,6 +87,43 @@ public void CanRenderNotFoundPageAfterStreamingStarted()
         Browser.Equal("Default Not Found Page", () => Browser.Title);
     }
 
+    [Theory]
+    [InlineData(true)]
+    [InlineData(false)]
+    public void ProgrammaticNavigationToNotExistingPathReExecutesTo404(bool streaming)
+    {
+        string streamingPath = streaming ? "-streaming" : "";
+        Navigate($"{ServerPathBase}/reexecution/redirection-not-found-ssr{streamingPath}?navigate-programmatically=true");
+        Assert404ReExecuted();
+    }
+
+    [Theory]
+    [InlineData(true)]
+    [InlineData(false)]
+    public void LinkNavigationToNotExistingPathReExecutesTo404(bool streaming)
+    {
+        string streamingPath = streaming ? "-streaming" : "";
+        Navigate($"{ServerPathBase}/reexecution/redirection-not-found-ssr{streamingPath}");
+        Browser.Click(By.Id("link-to-not-existing-page"));
+        Assert404ReExecuted();
+    }
+
+    [Theory]
+    [InlineData(true)]
+    [InlineData(false)]
+    public void BrowserNavigationToNotExistingPathReExecutesTo404(bool streaming)
+    {
+        // non-existing path has to have re-execution middleware set up
+        // so it has to have "reexecution" prefix. Otherwise middleware mapping
+        // will not be activated, see configuration in Startup
+        string streamingPath = streaming ? "-streaming" : "";
+        Navigate($"{ServerPathBase}/reexecution/not-existing-page-ssr{streamingPath}");
+        Assert404ReExecuted();
+    }
+
+    private void Assert404ReExecuted() =>
+        Browser.Equal("Welcome On Page Re-executed After Not Found Event", () => Browser.Exists(By.Id("test-info")).Text);
+
     [Theory]
     [InlineData(true)]
     [InlineData(false)]
@@ -99,6 +136,9 @@ public void CanRenderNotFoundPageNoStreaming(bool useCustomNotFoundPage)
         {
             var infoText = Browser.FindElement(By.Id("test-info")).Text;
             Assert.Contains("Welcome On Custom Not Found Page", infoText);
+            // custom page should have a custom layout
+            var aboutLink = Browser.FindElement(By.Id("about-link")).Text;
+            Assert.Contains("About", aboutLink);
         }
         else
         {

src/Components/test/E2ETest/Tests/GlobalInteractivityTest.cs

@@ -39,6 +39,9 @@ public void CanRenderNotFoundInteractive(string renderingMode, bool useCustomNot
         {
             var infoText = Browser.FindElement(By.Id("test-info")).Text;
             Assert.Contains("Welcome On Custom Not Found Page", infoText);
+            // custom page should have a custom layout
+            var aboutLink = Browser.FindElement(By.Id("about-link")).Text;
+            Assert.Contains("About", aboutLink);
         }
         else
         {

src/Components/test/testassets/Components.TestServer/RazorComponentEndpointsNoInteractivityStartup.cs

@@ -48,19 +48,42 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 
         app.Map("/subdir", app =>
         {
-            if (!env.IsDevelopment())
+            app.Map("/reexecution", reexecutionApp =>
             {
-                app.UseExceptionHandler("/Error", createScopeForErrors: true);
-            }
+                if (!env.IsDevelopment())
+                {
+                    app.UseExceptionHandler("/Error", createScopeForErrors: true);
+                }
 
-            app.UseStaticFiles();
-            app.UseRouting();
-            RazorComponentEndpointsStartup<TRootComponent>.UseFakeAuthState(app);
-            app.UseAntiforgery();
-            app.UseEndpoints(endpoints =>
-            {
-                endpoints.MapRazorComponents<TRootComponent>();
+                reexecutionApp.UseStatusCodePagesWithReExecute("/not-found-reexecute", createScopeForErrors: true);
+                reexecutionApp.UseStaticFiles();
+                reexecutionApp.UseRouting();
+                RazorComponentEndpointsStartup<TRootComponent>.UseFakeAuthState(reexecutionApp);
+                reexecutionApp.UseAntiforgery();
+                reexecutionApp.UseEndpoints(endpoints =>
+                {
+                    endpoints.MapRazorComponents<TRootComponent>();
+                });
             });
+
+            ConfigureSubdirPipeline(app, env);
+        });
+    }
+
+    private void ConfigureSubdirPipeline(IApplicationBuilder app, IWebHostEnvironment env)
+    {
+        if (!env.IsDevelopment())
+        {
+            app.UseExceptionHandler("/Error", createScopeForErrors: true);
+        }
+
+        app.UseStaticFiles();
+        app.UseRouting();
+        RazorComponentEndpointsStartup<TRootComponent>.UseFakeAuthState(app);
+        app.UseAntiforgery();
+        app.UseEndpoints(endpoints =>
+        {
+            endpoints.MapRazorComponents<TRootComponent>();
         });
     }
 }

src/Components/test/testassets/Components.TestServer/RazorComponentEndpointsStartup.cs

@@ -76,20 +76,17 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             app.Map("/reexecution", reexecutionApp =>
             {
                 reexecutionApp.UseStatusCodePagesWithReExecute("/not-found-reexecute", createScopeForErrors: true);
-
                 reexecutionApp.UseRouting();
+
                 reexecutionApp.UseAntiforgery();
-                reexecutionApp.UseEndpoints(endpoints =>
-                {
-                    endpoints.MapRazorComponents<TRootComponent>();
-                });
+                ConfigureEndpoints(reexecutionApp, env);
             });
 
             ConfigureSubdirPipeline(app, env);
         });
     }
 
-    protected virtual void ConfigureSubdirPipeline(IApplicationBuilder app, IWebHostEnvironment env)
+    private void ConfigureSubdirPipeline(IApplicationBuilder app, IWebHostEnvironment env)
     {
         WebAssemblyTestHelper.ServeCoopHeadersIfWebAssemblyThreadingEnabled(app);
 
@@ -106,11 +103,15 @@ protected virtual void ConfigureSubdirPipeline(IApplicationBuilder app, IWebHost
         {
             if (ctx.Request.Query.ContainsKey("add-csp"))
             {
-                 ctx.Response.Headers.Add("Content-Security-Policy", "script-src 'self' 'unsafe-inline'");
+                ctx.Response.Headers.Add("Content-Security-Policy", "script-src 'self' 'unsafe-inline'");
             }
             return nxt();
         });
+        ConfigureEndpoints(app, env);
+    }
 
+    private void ConfigureEndpoints(IApplicationBuilder app, IWebHostEnvironment env)
+    {
         _ = app.UseEndpoints(endpoints =>
         {
             var contentRootStaticAssetsPath = Path.Combine(env.ContentRootPath, "Components.TestServer.staticwebassets.endpoints.json");

src/Components/test/testassets/Components.TestServer/RazorComponents/App.razor

@@ -1,5 +1,5 @@
 @using Components.TestServer.RazorComponents.Pages.Forms
-@using Components.WasmMinimal.Pages
+@using Components.WasmMinimal.Pages.NotFound
 
 @code {
     [Parameter]

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/NotFound/RedirectionNotFound-SSR-streaming.razor

@@ -0,0 +1,5 @@
+@page "/redirection-not-found-ssr-streaming"
+@page "/reexecution/redirection-not-found-ssr-streaming"
+@attribute [StreamRendering(true)]
+
+<Components.WasmMinimal.Pages.NotFound.RedirectionNotFoundComponent StartStreaming="true" />

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/NotFound/RedirectionNotFound-SSR.razor

@@ -0,0 +1,5 @@
+@page "/redirection-not-found-ssr"
+@page "/reexecution/redirection-not-found-ssr"
+@attribute [StreamRendering(false)]
+
+<Components.WasmMinimal.Pages.NotFound.RedirectionNotFoundComponent />

src/Components/test/testassets/Components.WasmMinimal/Pages/NotFound/CustomNotFoundPage.razor

@@ -0,0 +1,5 @@
+@page "/render-custom-not-found-page"
+@layout NotFoundLayout
+
+<h3 id="test-info">Welcome On Custom Not Found Page</h3>
+<p>Sorry, the page you are looking for does not exist.</p>

src/Components/test/testassets/Components.WasmMinimal/Pages/NotFound/NotFoundLayout.razor

@@ -0,0 +1,23 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+    <header class="top-bar">
+        <a id="about-link" href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+    </header>
+    <main>
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>
+
+<style>
+    .top-bar {
+        background-color: #0078d4;
+        color: white;
+        padding: 10px;
+        text-align: center;
+        width: 100%;
+        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+    }
+</style>

src/Components/test/testassets/Components.WasmMinimal/Pages/NotFound/RedirectionNotFound-Interactive.razor

@@ -0,0 +1,23 @@
+@page "/redirection-not-found"
+@page "/reexecution/redirection-not-found"
+
+<RedirectionNotFoundComponent @rendermode="@RenderModeHelper.GetRenderMode(_renderMode)" WaitForInteractivity="true"/>
+
+@code{
+    [Parameter, SupplyParameterFromQuery(Name = "renderMode")]
+    public string? RenderModeStr { get; set; }
+
+    private RenderModeId _renderMode;
+
+    protected override void OnInitialized()
+    {
+        if (!string.IsNullOrEmpty(RenderModeStr))
+        {
+            _renderMode = RenderModeHelper.ParseRenderMode(RenderModeStr);
+        }
+        else
+        {
+            throw new ArgumentException("RenderModeStr cannot be null or empty. Did you mean to redirect to /redirection-not-found-ssr?", nameof(RenderModeStr));
+        }
+    }
+}

src/Components/test/testassets/Components.WasmMinimal/Pages/NotFound/RedirectionNotFoundComponent.razor

@@ -0,0 +1,38 @@
+@inject NavigationManager NavigationManager
+
+@if (!WaitForInteractivity || RendererInfo.IsInteractive)
+{
+    <h1>Original page</h1>
+
+    <p id="test-info">Any content</p>
+    <a id="link-to-not-existing-page" href="@_nonExistingPath">
+        Go to not-existing-page
+    </a>
+}
+
+@code{
+    [Parameter]
+    [SupplyParameterFromQuery(Name = "navigate-programmatically")]
+    public bool? NavigateProgrammatically { get; set; }
+
+    [Parameter]
+    public bool StartStreaming { get; set; } = false;
+
+    [Parameter]
+    public bool WaitForInteractivity { get; set; } = false;
+
+    private string _nonExistingPath = string.Empty;
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (StartStreaming)
+        {
+            await Task.Yield();
+        }
+        _nonExistingPath = $"{NavigationManager.BaseUri}reexecution/not-existing-page";
+        if (NavigateProgrammatically == true)
+        {
+            NavigationManager.NavigateTo(_nonExistingPath);
+        }
+    }
+}

src/Components/test/testassets/Components.TestServer/RenderModeHelper.cs → src/Components/test/testassets/Components.WasmMinimal/RenderModeHelper.cs

@@ -5,8 +5,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 
-namespace TestServer;
-
 public static class RenderModeHelper
 {
     public static IComponentRenderMode GetRenderMode(RenderModeId renderMode)