[Blazor, Router] Ability to set a base route for a page from a layout

[Abooow]

Is there an existing issue for this?

• [X] I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

When having multiple pages with the same base route, e.g. /project/{projectName}, it can be annoying to ensure that all the project pages have the same base route, and if you decide to change the route to /project/{projectId:guid}, you have to go through all your pages and change them.

Another problem with today's solution is, let's say you want to localize your site and have the selected language shown in the uri for all the pages e.g. /{lang}/..., not only do you have you include it in all the route templates, but you need a way to validate it. Of course you can have every page use a common PageLayout that validates the language in the uri, but the only way to get a value from the uri is to use the NavigationManager and get the current uri. But then you have to split it and get the right segment, which might not be the most practical solution.

Describe the solution you'd like

Now, a simple solution for this is to allow layouts (components that inherit LayoutComponentBase) to define a base route which will be prefixed to all pages (component that have at least one Page attribute defined) that uses the layout.

Example:

ProjectLayout.razor

@inherits LayoutComponentBase
@baseroute "/project/{projectId:guid}"

<CascadingValue Value="ProjectId" Name="ProjectId">
    @Body
</CascadingValue>

@code {
    [Parameter]
    public required Guid ProjectId { get; init; }
}

ProjectSettings.razor

@layout ProjectLayout
@page "/settings"

<h1>Settings</h1>

@code {
    [CascadingParameter(Name = "ProjectId")]
    private Guid projectId { get; set; }
}

Final ProjectSettings url: /project/{projectId}/settings

To define a base route, you have to use the @baseroute directive (something other than @page, this route should not be navigable from the browser). If ProjectLayout.razor had another layout defined of e.g. BaseLayout.razor, which in turn had a base route of @baseroute "/{lang}", then the final url for ProjectSettings would be /{lang}/project/{projectId}/settings, base routes can be chained.

Cons

• Not really a problem, but more of a limitation. Base routes only work on pages that have a Layout attribute directly defined. The DefaultLayout in App.razor would be ignored if it has a @baseroute defined.
• It could become harder to find what the final url is for a page when part of the route is defined in another file. But because of the previous point described, you know that it comes from the layout and not some totally random file.

Additional context

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.