erikringsmuth / app-router

Router for Web Components
https://erikringsmuth.github.io/app-router/
MIT License
610 stars 83 forks source link

Route nesting #53

Closed KhoaVo closed 9 years ago

KhoaVo commented 9 years ago

Is there a way to nest routes like there is in other routing solutions? Kind of like https://github.com/polymore/more-routing

This is useful so that the children do not need to specify the full path of their parents route.

erikringsmuth commented 9 years ago

So far no. I haven't thought of a good way to do it the way it's currently structured.

One potential way would be to have an outer router doing the page transitions and an inner router on a specific page routing smaller changes. There would probably need to be some tweaks to make that work well so that the outer router doesn't reload the page when only an inner route changes. The other downside is you'd have to specify the whole route rather than just the suffix on the inner routes.

There are a few approaches I've seen to nested routes.

more-routing is building on core-pages and core-animated-pages which both use core-selector to change routes. core-selector does index based selection and more-routing adds conditional templates in the example you're pointing to. To me, core-selector feels a bit rudimentary when it comes to routing. That's a critique of core-pages, not more-routing.

The React router is callback based. Every URL matches 1 or more nested routes. Each route has an action (callback). A URL might trigger 3 nested route actions to load a layout, load the main content, then load a sub-section of the view. The router is completely decoupled from mounting the views. The user is in charge of mounting the view in the JavaScript callback. There's more boilerplate code, but you get more control.

app-router really isn't like either of these. A URL only matches 1 route. The content is loaded and attached to the DOM inline inside the route. I'm not sure how a nested route would attach itself. This is why I was leaning toward doing layouts this way to avoid nested routes https://erikringsmuth.github.io/app-router/#/layouts.

In the end, considering that Mozilla announced today that they wouldn't be supporting HTML imports, there may need to be a big re-think of the way everything is done in app-router. Maybe a React like callback based router with ES6 modules is the way to go. This is just rambling and ideas at this point.

abourget commented 9 years ago

What did Mozilla announce exactly ? Do you have a link ?

abourget commented 9 years ago

btw I use nested routes and it works pretty well, with version 2.2.0 . I'm wondering if the global previousUrl didn't break that in the latest releases though.

erikringsmuth commented 9 years ago

Mozilla's blog from yesterday... https://hacks.mozilla.org/2014/12/mozilla-and-web-components/

erikringsmuth commented 9 years ago

This should now be supported with https://erikringsmuth.github.io/app-router/#/api#onurlchange.