Search code examples
blazorblazor-client-sideblazor-webassembly

Does Blazor, or some NuGet package, support or extend the Routing for nested routes?


Imagine I have an online sales and order processing app. I have Customers, Invoice, InvoiceItem. A customer has a question about an item in their last order and wants to send a link to their sales rep.

How does Blazor handle this situation where the URL SHOULD be something like...

https://myapp.com/customer/12345/Invoice/234/InvoiceItem/4

Is this possible with the Blazor routing engine?

I've read multiple blog posts and the routing SEEMS to stop at: /page/{parameter} whereas I'd really like /page/{parameter}/control/{parameter}/control/{parameter}/etc...


Solution

  • This is absolutely possible with what's built into blazor, at least with .NET Core 3.1 and .NET5. It's just important to use different parameter names, as they map to the razor components [Parameter] properties.

    For your example it would be:

    @page "/customer/{Customer}/invoice/{Invoice}/invoiceitem/{InvoiceItem}"
    
    <span>Customer: @Customer</span>
    <span>Invoice: @Invoice</span>
    <span>Item: @InvoiceItem</span>
    
    @code {
        [Parameter] public string Customer {get; set;}
        [Parameter] public string Invoice {get; set;}
        [Parameter] public string InvoiceItem {get; set;}
    }