Aspnetcore: Feature Request: 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 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, [e-mail]
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
https://github.com/dotnet/aspnetcore/issues/11212#issuecomment-614547124,
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\customer123\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)..