[Components] Simple 404 Handling (Fallback Route)

src/Components/src/Microsoft.AspNetCore.Components/Routing/Router.cs

@@ -30,6 +30,11 @@ public class Router : IComponent, IDisposable
         /// assemblies, for components matching the URI.
         /// </summary>
         [Parameter] private Assembly AppAssembly { get; set; }
+
+        /// <summary>
+        /// Gets or sets the route that should be used when no components are found with the requested route.
+        /// </summary>
+        [Parameter] private string FallbackRoute { get; set; }
 
         private RouteTable Routes { get; set; }
 
@@ -74,15 +79,21 @@ protected virtual void Render(RenderTreeBuilder builder, Type handler, IDictiona
             builder.CloseComponent();
         }
 
-        private void Refresh()
+        private void Refresh(bool useFallback = false)
         {
-            var locationPath = UriHelper.ToBaseRelativePath(_baseUri, _locationAbsolute);
+            var locationPath = useFallback ? FallbackRoute : UriHelper.ToBaseRelativePath(_baseUri, _locationAbsolute);
             locationPath = StringUntilAny(locationPath, _queryOrHashStartChar);
             var context = new RouteContext(locationPath);
             Routes.Route(context);
             if (context.Handler == null)
             {
-                throw new InvalidOperationException($"'{nameof(Router)}' cannot find any component with a route for '/{locationPath}'.");
+                if (useFallback || FallbackRoute == null)
+                {
+                    throw new InvalidOperationException($"'{nameof(Router)}' cannot find any component with {(useFallback ? "the fallback route" : "a route for")} '/{locationPath}'.");
+                }
+
+                Refresh(useFallback: true);
+                return;
             }
 
             if (!typeof(IComponent).IsAssignableFrom(context.Handler))

src/Components/test/Microsoft.AspNetCore.Components.E2ETest/Tests/RoutingTest.cs

@@ -88,6 +88,15 @@ public void CanArriveAtNonDefaultPage()
             AssertHighlightedLinks("Other", "Other with base-relative URL (matches all)");
         }
 
+        [Fact]
+        public void CanArriveAtFallbackPageFromBadURI()
+        {
+            SetUrlViaPushState("/Oopsie_Daisies%20%This_Aint_A_Real_Page"); 
+
+            var app = MountTestComponent<TestRouter>();
+            Assert.Equal("Oops, that component wasn't found!", app.FindElement(By.Id("test-info")).Text);
+        }
+
         [Fact]
         public void CanFollowLinkToOtherPage()
         {

src/Components/test/testapps/BasicTestApp/RouterTest/Error404.cshtml

@@ -0,0 +1,2 @@
+@page "/Error404"
+<div id="test-info">Oops, that component wasn't found!</div>

src/Components/test/testapps/BasicTestApp/RouterTest/TestRouter.cshtml

@@ -1 +1 @@
-<Router AppAssembly=typeof(BasicTestApp.Program).Assembly />
+<Router AppAssembly=typeof(BasicTestApp.Program).Assembly FallbackRoute="/Error404" />