Search code examples
routesweb-componentstenciljs

When we make web componenents in stenciljs, how to handle routing for other frameworks?


I have made a web component breadcrumbs using StencilJs, I would be using this web component in react, Angular and Vue.But when the Routing is Concerned,Should i also Configure routing in my Component? I can see implementation of Routing is different in different Frameworks and Libraries.

i have added path to my component input where they can pass URL's along with the name of the breadcrumb using an array

breadcrumbvalues = [{ name: 'breadcrumb1',path:"/" }, { name: 'breadcrumb2' ,path:"/"},{ name: 'breadcrumb3',path:"/" },{ name: 'breadcrumb4',path:"/" },{ name: 'breadcrumb5',path:"/" }];


Solution

  • Components themselves shouldn't care about routing, since they are just pieces used to build the application. (The exception is components that are designed around routing features.) Routing is an application-level concern, so the routing solution should be chosen for compatibility with the application framework and the application design. The most natural choices are - angular routing for angular apps, react routing for react apps, ... But you don't have to use those solutions. You could use anything as long as it works with the application framework. For example you might be able to build a common routing solution that can be used with Angular, Vue, React etc. and you might be able to use Stencil routing to do that. However, you don't have to use Stencil routing just because you use Stencil to build your web components.