Nested Routing In Blazor

[AmarjeetBanwait]

@SteveSandersonMS As 5489 is closed now.
Can we put nested routing on the roadmap as it is necessary feature for routing
Ref. Angular Router Outlet

[ChristianWeyer]

Yep, this is essential for larger applications - and enables something like 'feature modules' (as we have in Angular).

[poke]

I would like to second this request. Right now the router is meant as a single central thing that controls the routing of the whole application but this is actually a very special case. It would help a lot if you could create relative routers that will just route relatively to wherever they currently are, regardless of whether you create an SPA or whether your (server-side) Blazor app is a component on a normal server-side Razor view.

I took a deeper look at the routing components and I think what conflicts this idea the most at the moment is that the RouteTableFactory is static, so you cannot replace the route table by a custom provider (e.g. that provided the router with relative routes), and that the Router is focused on assemblies where it will look for routed components (with the @page directive which apparently gets translated into a RouteAttribute).

Other frameworks, e.g. Angular’s router, solve this by actually having routes declared at the router, instead of automatically discovering routes through the components. So what would be helpful if there was a way to provide a router with a already prepared RouteTable. I’ll try to see if that already brings me closer to what I am trying to accomplish in my situation.

[edit] Okay, this fails because all the useful things are internal, like RouteTable, RouteEntry, and TemplateParser…

[AmarjeetBanwait]

@danroth27 @SteveSandersonMS
Can we consider this in "blazor wasm" release or at least 5.0 previews?

[Wayne-Mather]

It would be great to have component->component routing. currently routing only works for pages (i.e: controllers). I would love to have a tag and have routing within that component that can load other components based on the url. Even something like <component_router><root_component/></component_router>would be ok and we register routes to components somehow.

The only way to currently do this is a root component that essentially is a giant switch to determine the state and swapout the components as required. Imagine a simple crud component. It may have to be embedded into an existing razor view due to a legacy enterprise app written with Controllers & Views (the main selling point for blazor-server). It is easier to maintain and manage 3 or 4 smaller components dedicated to the task than one component with a huge bunch of razor logic to determine the presentation.

[Wayne-Mather]

Hi,

If anyone comes across this thread I have created BlazorCrudComponentRouter that enables you to easily create a CRUD based razor component to make it easier to host within MVC Views.

This achieves my goal for the short term when slowly moving away from MVC Controllers & Views in 2.1 to 3.1 hosted razor components (Blazor Server).

Your main razor component then looks like this:

<CrudComponentRouter>
    <SearchComponent>
        <MySearch/>
    </SearchComponent>
    <EditComponent>
        <MyEdit/>
    </EditComponent>
    <DeleteComponent>
        <MyDelete/>
    </DeleteComponent>
    <CreateComponent>
        <MyCreate/>
    </CreateComponent>
</CrudComponentRouter>

Maybe useful for other people so it's MIT licensed until Blazor supports component based routing (if it ever will)

[furqansafdar]

Child or nested (relative) routing is very much a needed feature similar to what Angular offers but i don't see any significant progress on its availability. Is there any plans for this feature to come out soon?

[Wayne-Mather]

Hi, I just built a production sit in blazor server. It is production ready. However if you want a hybrid then yes you would need my component. I just deployed my project to production so will try to give you what you need this Sunday.

…

On Thu, 16 Apr 2020, 7:31 pm Furqan Safdar, ***@***.***> wrote: It is very much needed for my experimental project on Blazor to see its readiness for production but i don't see any significant progress on the availability of this feature. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#11212 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACUJ2HM452XRXUL2EROE4PLRM3JODANCNFSM4HYFOZEQ> .

[lixiaoyuan]

现在的路由功能太简陋了，希望能像angular一样。

[kevonh]

I support the request for nested routing. Being able to provide "Deep" links into an application is critical.

MySite.Com\customer\123\order\45\orderitem\6

[SteveSandersonMS]

@kevoh That’s already possible with the existing router.

[titobf]

Hi @SteveSandersonMS. Can you please share some links which explain how to achieve what kevonh asks? I'm learning Blazor and I don't find anything related. Thanks

[SteveSandersonMS]

@titobf Blazor's routing system lets you accept any number of parameters. For example you could declare a route template like:

@page "/customer/{customerId}/order/{orderId}/orderitem/{orderItemId}"

Please see docs at https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#route-parameters

[darianferrer]

Hi @SteveSandersonMS, I think what this is about is having a routing system similar to Angular or react-router, where @page "/customer/{customerId}/order/{orderId}/orderitem/{orderItemId}" is not an absolute route in a component, but could be relative:

CustomerComponent.razor: @page "/customer/{customerId}/
OrderComponent.razor: @page "/order/{orderId}"

And inside CustomerComponent we have some sort of route config:

        <Route path="order/{orderId}">
          <OrderComponent />
        </Route>
        <Route path="orders">
          <CustomerOrders />
        </Route>

[SteveSandersonMS]

Yes, I know :) It is something we’d like to do.

I was just answering the question to give a way of achieving the desired route pattern with the existing router features.

[kevonh]

Hi @SteveSandersonMS, I think what this is about is having a routing system similar to Angular or react-router, where @page "/customer/{customerId}/order/{orderId}/orderitem/{orderItemId}" is not an absolute route in a component, but could be relative:

This, exactly! Up vote++

[partyelite]

Has there been any work done on this feature?

[SteveSandersonMS]

Not in 5.0. We have focused on many other priorities. I hope it makes sense that we have to balance a lot of different priorities and customer demands.

If you're keen to advocate for this as a 6.0 feature, the most effective way to advocate for it would be describing clear and simple scenarios where you think this is needed and why the existing routing system isn't sufficient. For example, why there's a practical problem with declaring route patterns like "/customer/{customerId}/order/{orderId}/orderitem/{orderItemId}".

I'm not arguing that anyone is wrong, so please don't interpret it that way :) I'm just saying that having clearer explanations will help to make a stronger case for why this needs to be prioritised above other enhancements that are also being demanded. Hope that makes sense!

[partyelite]

@SteveSandersonMS I'm a man of a few words so I'm gonna give you an example. Please take a look at this (see Profile tab)
https://scottwhittaker.net/aurelia/2016/06/12/aurelia-router-demo.html

How can we do something similar in Blazor. We are building an larger app and something like this is a must have. Currently we have somekind of hacks like CrudComponentRouter with history.replaceState but that is extremely dirty.

[nvmkpk]

It looks like something like this can also be done with nested layouts. But I don't think razor file currently supports specifying a layout file like cshtml does.

[nvmkpk]

Actually, it looks like nested layouts work in razor file as well.

[partyelite]

Layouts work but imagine the following example. Based on the route you need to dynamically add tab item into tab control. After a tab item is added it should render some component as it's content. The newly added tab item should have it's set of routes that change just the rendered content of the tab item component.
Lets simplify and say you navigate to "/profile/username" route. In my scenario, a Profile tab item should be added into a tab control. That tab item should render a UserName component where a user can enter username and navigate to "/profile/password" route which should render in the existing Profile tab and replace the current UserName component. Something like that is not possible with nested layouts (or I'm missing something)

[knuxbbs]

@partyelite I'm facing a similar issue. Did you find any solution?

Working with tabs and routes with Blazor seems a little complicated. This is a reason to see this feature implemented.

[partyelite]

@knuxbbs sorry, no.. I have tried using javascript for routing inside tabs but that proved to be unreliable because of the bugs in browsers (like firefox not replacing url when pushState is used)..

[danroth27]

For folks that are interested in this feature, have you tried https://github.com/hez2010/BlazorRouter? How well does it meet your needs?

[glatzert]

I don't think it implements nested routing as most people would understand it.
Parameter-binding needs to be done by hand and there's only one active route at any given time.

angulars router (would be my preferred method) allows multiple active components (or routes) at the same time. Essentially it builds a stack of matched routes (from a tree structure) and router-outlets will render that stack.
The pictures here show, what's I'd think is expected from nested routing: https://stackoverflow.com/a/51677208/1584626
Especially the notice about tabs seems relevant to me.
IIRC, I already prototyped it in Blazor, but did not want to use it, since it's been a little clunky, and the route-machting code needed to be duplicated. But I probably can provide it here in github, if there's interest.

[gingters]

No, that "nested routing" in the referenced project is not a real routing. Technically it is just a nested switch/case statement in Razor syntax.

A real nested routing would allow to configure a component to listen on a defined part of the url or a query parameter, i.e. either by code or by simple configuration. The latter is important because currently there is absolutely no way to share the pages (standard Blazor) or components with routing information (BlazorRouter) between different projects where each project needs to define different routes for the same pages / components.

This is also especially important for the already mentioned tab-use case (which tab is selected). This, by the way, also requires a two-way binding from the route back to the url, so if you switch the tab the url needs to reflect that change to allow the standard web feature of deep linking to work.

Also, the distinction between Pages (which allow to bind a property to a query parameter) and components (where this is not possible) is very strange. There should be only components with all possible binding features and if a component can be routed to (if it is a Page) should be defined in the application startup when the router is configured.

[glatzert]

Also, the distinction between Pages (which allow to bind a property to a query parameter) and components (where this is not possible) is very strange. There should be only components with all possible binding features and if a component can be routed to (if it is a Page) should be defined in the application startup when the router is configured.

IIRC internally there's no "Page" - it's just a component with an specific attribute attached, that defines the route. If you have access to the route-table (unfortunately this is internal), you can add components as pages.
Nevertheless, I agree with the "central" definition of the routing.
Also the notion of modules in angular is kind of useful, since you can embed it into a subroute itself.

[gingters]

IIRC internally there's no "Page" - it's just a component with an specific attribute attached, that defines the route.
Correct, a page is a component with a page attribute and as such a hardcoded route - which makes it impossible to use the same page in different projects under different routes.

You'd need to derive from a component in a shared library without the attribute it in each project just to add the attribute to it on the derived class. This is really unfortunate and a really bad developer experience. You should not be forced to derive from a type just to define a route with an attribute.

[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.

[rborosak]

Any update on this?

[malieop]

@mkArtakMSFT Any news on this feature? Can we now when do you plan do deploy this ?

[danroth27]

@rborosak @malieop This issue is currently in our Backlog milestone, which means it's not currently committed for any upcoming release. If folks in the community have specific thoughts on the key scenarios it should enable, design proposals on how it should work, or implementation approaches, we welcome these contributions.

[alfattack]

Just chiming in to express my strong desire for this feature.

Alternatively, if RouteTableFactory was more extensible, that would also be good.