Using Layouts and Shared Components
Explore how to manage Blazor UI using layouts and shared components by understanding the role of the LayoutComponentBase class, configuring default layouts in App.razor, and reusing shared components like navigation menus. This lesson helps you create consistent and maintainable interfaces in your Blazor applications.
In this lesson, we will cover the usage of layouts and shared components in Blazor. Layouts provide a common page template that Razor components are inserted into. Shared Razor components can be used in any Razor component inside the application.
Razor component layout with page placeholder
We will use the following project setup. It contains sufficient examples to demonstrate the concepts.
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
Blazor WebAssembly project
Razor component layouts
In the above setup, we have one example of a Razor ...