如何在Blazor中轻松实现类型安全的路由？

我完全懂你的痛点！Blazor默认用字符串写路由确实太容易出错了，编译时查不出来，等上线后才跳转到不存在的页面真的很闹心。下面给你几个实用的方案，从简单手动实现到自动维护的高级方案都有，你可以按需选择：

• 手动维护静态路由类（零依赖，快速上手）
  这是最直接的方案，不需要引入任何外部库，自己定义一个静态类把所有页面的路由都存成常量或带参数的方法，跳转时直接引用就行，彻底避免手敲字符串的错误。示例代码：

  public static class AppRoutes
  {
      // 对应 /Counter 页面的路由常量
      public const string Counter = "/Counter";
      // 带参数的路由，比如 /Product/123
      public static string Product(int productId) => $"/Product/{productId}";
      // 带多个参数的路由，比如 /Order/Details/456?tab=summary
      public static string OrderDetails(int orderId, string tab) => $"/Order/Details/{orderId}?tab={tab}";
  }
  

  在组件里使用的方式：

  <!-- 导航链接 -->
  <NavLink href="@AppRoutes.Counter" ActiveClass="active">Counter</NavLink>
  <!-- 带参数的导航链接 -->
  <NavLink href="@AppRoutes.Product(789)" ActiveClass="active">View Product #789</NavLink>
  

  在代码逻辑里跳转：

  // 注入NavigationManager后使用
  NavigationManager.NavigateTo(AppRoutes.OrderDetails(101, "summary"));
  

  优点是简单易理解，完全可控；缺点是如果页面的@page路由模板改了，需要手动同步这个类的内容，但比直接写字符串靠谱太多。

• 用源代码生成器自动生成（零手动维护，编译时校验）
  如果项目页面比较多，不想手动维护路由常量，可以用源代码生成器来自动完成这个工作——它会在编译时扫描你所有带@page指令的Blazor组件，自动生成对应的静态路由方法，完全不用你手动同步。
  这类工具一般是NuGet包的形式，安装后不需要额外配置，编译时就会自动生成代码。使用起来非常简单，比如：

  <!-- 直接用生成的Routes类跳转，组件名对应生成的方法 -->
  <NavLink href="@Routes.CounterPage()" ActiveClass="active">Counter</NavLink>
  <!-- 带参数的页面会自动生成带参数的方法 -->
  <NavLink href="@Routes.ProductDetailsPage(102)" ActiveClass="active">View Product Details</NavLink>
  

  这种方案的最大优势是编译时校验：如果某个组件被删除或者路由模板改了，生成的代码会自动同步，编译时就能发现错误，彻底杜绝运行时的404问题。

• 自定义NavigationManager扩展方法（基于组件类型跳转）
  你还可以给NavigationManager写一个扩展方法，让跳转时直接传入组件的类型，而不是路由字符串，内部通过反射解析组件的@page路由模板并处理参数。示例代码：

  public static class NavigationManagerExtensions
  {
      public static void NavigateToComponent<TComponent>(this NavigationManager navManager, object? routeParameters = null)
      {
          var componentType = typeof(TComponent);
          // 获取组件的@page路由模板
          var routeAttributes = componentType.GetCustomAttributes<RouteAttribute>(inherit: true);
          if (!routeAttributes.Any())
          {
              throw new InvalidOperationException($"组件 {componentType.Name} 未标记 @page 路由指令");
          }
  
          var routeTemplate = routeAttributes.First().Template;
          // 替换路由参数
          if (routeParameters != null)
          {
              var props = routeParameters.GetType().GetProperties();
              foreach (var prop in props)
              {
                  var placeholder = $"{{{prop.Name}}}";
                  if (routeTemplate.Contains(placeholder))
                  {
                      var value = prop.GetValue(routeParameters)?.ToString() ?? string.Empty;
                      routeTemplate = routeTemplate.Replace(placeholder, value);
                  }
              }
          }
  
          navManager.NavigateTo(routeTemplate);
      }
  }
  

  使用时直接传入组件类型：

  // 跳转到Counter组件
  NavigationManager.NavigateToComponent<Counter>();
  // 跳转到带参数的Product组件
  NavigationManager.NavigateToComponent<Product>(new { ProductId = 103 });
  

  这种方式完全不用记任何路由字符串，直接用组件类型跳转，编译时如果组件不存在会直接报错，安全性拉满。

备注：内容来源于stack exchange，提问作者Olivér Raisz