Skip to main content

Routing Configuration

Overview​

This document covers the routing configuration of the APEX Portal application, focusing on the App.razor file which defines how URL routes are mapped to components throughout the application.

Prerequisites​

  • .NET 8.0 SDK or later
  • Blazor WebAssembly project structure
  • Understanding of Blazor routing concepts

Configuration Structure​

The App.razor file is responsible for:

  1. Configuring the Router component
  2. Specifying which assemblies contain routable components
  3. Defining the default layout
  4. Handling route not found scenarios

API Reference​

Router Configuration​

<Router AppAssembly="@typeof(App).Assembly"
        AdditionalAssemblies="new[] { typeof(Billing.Razor.BillRuns).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Key Properties​

PropertyDescription
AppAssemblyThe main assembly containing components to be routed
AdditionalAssembliesAdditional assemblies containing routable components
DefaultLayoutThe default layout component for all routes

Examples​

Adding a New Module Assembly​

To include routable components from a new module:

<Router AppAssembly="@typeof(App).Assembly"
        AdditionalAssemblies="new[] { 
            typeof(Billing.Razor.BillRuns).Assembly,
            typeof(Products.Razor.ProductsList).Assembly 
        }">
    ...
</Router>

Custom Layout Selection​

To dynamically select layouts based on the route:

<Found Context="routeData">
    <RouteView RouteData="@routeData" DefaultLayout="@GetLayoutForRoute(routeData)" />
</Found>

@code {
    private Type GetLayoutForRoute(RouteData routeData)
    {
        // Example: Use a special layout for admin routes
        if (routeData.PageType.Namespace?.Contains("Admin") == true)
            return typeof(AdminLayout);
            
        return typeof(MainLayout);
    }
}

Best Practices​

  • Keep the Router configuration clean and focused
  • Only include necessary assemblies in AdditionalAssemblies
  • Provide a user-friendly not found page
  • Consider accessibility in error messages
  • Use route guards for protected routes

Common Issues and Solutions​

Issue: Components with @page directive not being found​

Solution: Ensure the assembly containing the component is included in AppAssembly or AdditionalAssemblies.

Issue: Default layout not being applied​

Solution: Verify that the DefaultLayout property is correctly set to the type of your layout component.

Solution: Check that route paths exactly match the @page directive in your components.