ViewComponent导航按钮不起作用

// 在 Startup.cs 中配置路由
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapRazorPages();
});

public class MyViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(int id)
    {
        var model = await _context.MyModel.FindAsync(id);
        if (model == null)
        {
            return Content("找不到相关内容");
        }
        return View(model);
    }
}

<button type="button" onclick="location.href='@Url.Action("Action", "Controller", new { id = Model.Id })'">导航</button>

// MyViewComponent.cs
public class MyViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(int id)
    {
        var model = await _context.MyModel.FindAsync(id);
        return View(model);
    }
}

// Views/Shared/Components/MyViewComponent/Default.cshtml
@model MyModel
<button type="button" onclick="location.href='@Url.Action("Details", "MyController", new { id = Model.Id })'">查看详情</button>

public IActionResult Index(int id)
{
    return ViewComponent("MyViewComponent", id);
}

<div>
    @await Component.InvokeAsync("MyViewComponent", new { id = Model.Id })
</div>