Blazor parameters in root page not working in Azure Static Web Apps

Question

I have a Blazor wasm project I am working on and I have the following functionality:

• When a user arrives to mydomain.com/customer they are redirected to the customer details
• As expected, all this functionality comes from an API and the list of customers is dynamic therefore I am not designing a custom page per customer. I - instead - have one page to accomplish that

In my code I use the following logic:

1. When a user types mydomain.com/ I display the list of all available customers
2. If a user navigates to mydomain.com/customer, my Index.razor page will not display the list of customers but instead display the customer detail
3. In the first case where a list of customers is displayed, when a user clicks on a customer, I use the NavigationManager to navigate to "/customer". This works great!

When I am running the application on my local machine, if I directly point to the URL for https://localhost:port/customer I am directed to the customer page.

In essence, everything happens on the root page (Index.razor). I understand that I can maybe redirect to https://localhost:port/c/customer to avoid using the root but I am not even sure if that is really my issue and I would like to avoid it if I can use something more elegant like the solution I have above which works locally on my machine.

Once I deployed this to Azure Static Web Apps I get 404 error if I attempt to directly go to the https://azure-static-apps-page/customer. I do not get an error if I attempt to go to the root page and then click on a customer on the list.

I suspect once it's published in Azure I am missing some configuration.

In case it helps, I do have <base href="/" /> in my index.html

Can someone assist so that I can understand why this is happening?

My Index.razor

@page "/"
@page "/{CustomerURL}"

@inject NavigationManager navigationManager

@if(string.isNullOrEmpty(CustomerURL)
{
  // Display list of customers (display a component)
} else
{
  // Display specific customer details (display a component)
  if(customer != null)
  {
    // Display customer details
  } else {
    <h3>Customer does not exist</h3>
  }
}

The parameter & Customer object:

[Parameter]
public string? Customer { get; set; }

private Customer customer;

My OnInitializedAsync:

protected override Task OnInitializedAsync()
{
   // If the parameter is not null, call the API to find the customer
   customer = APICall();
}

My SetParametersAsync:

public async override Task SetParametersAsync(ParameterView parameters)
{
    await base.SetParametersAsync(parameters);
    customer = APICall();
}

My OnClick method for when a customer is selected:

public void OnCustomerSelected(Customer c)
{
    // This is where the URL changes from https://localhost:port to https://localhost:port/customer
    navigationManager.NavigateTo("/" + c.CustomerUrl);
}

Answer 1

Static web apps do not have a typical web server, so you have to configure a fallback route

Docs: Fallback route

Fallback route

The application exposes URLs like /counter and /fetchdata which map to specific routes of the application. Since this app is implemented as a single page application, each route is served the index.html file. To ensure that requests for any path return index.html a fallback route is implemented in the staticwebapp.config.json file found in the Client project's root folder.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Answer 2

You have to match the names exactly

@page "/"
@page "/{CustomerURL}"

...

  [Parameter]
//public string? Customer { get; set; }
  public string? CustomerURL { get; set; }