.NET MAUI Blazor：如何将MainPage改为自定义Razor页面

问题原因 #

自定义Razor页面（.razor文件）编译后生成的类继承自ComponentBase，而NavigationPage要求子页面必须是Page（如ContentPage）的子类。直接用new Pages.Login()作为NavigationPage的构造参数，会因类型不匹配抛出异常。

解决方案 #

使用ComponentHostPage（MAUI专门用于承载Razor组件的页面容器）来包装你的Razor组件，再将其传入NavigationPage：

1. 确保引入必要的命名空间：

using Microsoft.Maui.Controls.Razor;

2. 修改App.xaml.cs中的MainPage赋值代码：

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        
        // 用ComponentHostPage承载Razor组件，再放入NavigationPage
        MainPage = new NavigationPage(new ComponentHostPage 
        { 
            Component = new Pages.Login() 
        });
    }
}

如果不需要导航栏（不需要NavigationPage），可以直接将ComponentHostPage设为MainPage：

MainPage = new ComponentHostPage { Component = new Pages.Login() };

注意事项 #

• 确认项目已正确引用Microsoft.Maui.Controls.Razor包，新建MAUI Razor项目会自动包含该依赖；若手动添加Razor页面，需手动引入。
• 若Razor页面需要传递参数，可在实例化Pages.Login()时直接传入，或通过绑定、依赖注入等方式处理。
• 后续导航到其他Razor页面时，同样遵循此模式：用ComponentHostPage承载目标Razor组件，再通过Navigation.PushAsync()完成导航。

内容的提问来源于stack exchange，提问作者Hickori