Hi guys basically I have a component with a button in it, this button helps me to navigate to another component using a dynamic url which can vary according to the id that it receives

The current implementation works perfectly with the button the problem is that if I copy and paste the url in my browser it doesn’t find de component, which means that only works when clicking the button and I would like to have both functionalities

This component is called WellReport.razor which contains the button

@page "/well-reports"
@inject IDialogService Dialog
@inject NavigationManager Navigation

<MudButton Variant="Variant.Outlined" OnClick="@(() => NavigateToReportUrl(context.Id))">View Report</MudButton>

code {

    private void NavigateToReportUrl(int? id)
    {
        var idForNavigation = id.ToString();
        Navigation.NavigateTo($"/report/{idForNavigation}");
    }

}

And this is the second component that i want to show

@page "/report/{id}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

<p>Report id is: @id!</p>

@code {
    [Parameter]
    public string? id { get; set; }
} 

Does anyone know why I cannot access the component when i copy and paste the url in the browser? is there any feature or configuration that I’m maybe missing?