Does your router support dynamic load the component? Thanks

[PrimeObjects]

No description provided.

[prasannavl]

There is simply no need for this. I think people who come from the "react-router" model seems to ask for this. react-router basically forces you on to a model where you have to predefine all your routes in one chain, or it simply will break.

Using react-router-component, its very natural. Inside your component, you dynamically load your dependent components using webpack require.ensure, or your own logic and you provide it a Locations set inside that component like its explained here: http://strml.viewdocs.io/react-router-component/multiple/ Its very idiomatic.

I think react-router flaunts it as a solution to an issue that didn't exist in the first place, if not for its very constrained model. I ended up losing sleep over the constrained model for complex applications before I finally decided to give react-router-component a try.

PS: Dynamic loading of the components should also never be the responsibility of the router IMO. Router should only help accommodate those, and this does just that perfectly.

[PrimeObjects]

The router solves the issue of routing at the page level. There're other challenges to develop a portal type of solution and it needs support multiple web parts developed on ES6. User will be able to upload one web parts in ES6 and see it work right away with other parts. Those (or at least some of) web parts should allow dynamic loading and the solution should also take care of unforeseeable dependencies.

Cheers
Gary

[prasannavl]

@PrimeObjects, I'm using this and accomplishing similar things to what you're asking without any problems. Could you provide a use case, or a code block on what exactly you're looking to accomplish?

Because, I don't see why not, you can use pretty much accomplish any pattern by setting up multiple routers with ease.

[PrimeObjects]

Hi Prasannavl,

I'm building a dashboard system. It has a navigation menu at the left side and the page area at the right. Click the item in the nav menu will load dashboard by using Router, it works fine. The system allows user to define their own dashboard and web parts in the dashboard, now all dashboards can be loaded dynamically by using react-router. The question is, some of the web parts need to be dynamic loaded based on the interaction (e.g. click button, select a dropdown item ...) from the user. I don't know react-route enough, so I never thought about multi-router (please share me a sample if possible), I'm using system.js to do it at the moment.

Also, because each ES6 web part may use any 3rd party lib as dependency, is there a better way to handle it than system.js.

Thank you for the help
Gary

[prasannavl]

This should be very easy to do. I'm currently on the move, so may be someone else might whip up an example, but the places you starting looking at would be to just load the system js modules during the interaction events, and the 'Locations' themselves should be included in that module that you load. With react router component, it's really no different than any other react component. You just put your locations in there, as suggested in the multiple routers module.

PS: To quickly summarize, use the same example as multiple routers mentioned in the docs, import one dynamically when ever you need it with system.import and add you render that component. That's actually it. It's just another react component.

Sent from Outlook Mobile

On Sat, Mar 5, 2016 at 10:01 AM -0800, "Gary Zhang" [email protected] wrote:

Hi Prasannavl,

I'm building a dashboard system. It has a navigation menu at the left side and the page area at the right. Click the item in the nav menu will load dashboard by using Router, it works fine. The system allows user to define their own dashboard and web parts in the dashboard, now all dashboards can be loaded dynamically by using react-router. The question is, some of the web parts need to be dynamic loaded based on the interaction (e.g. click button, select a dropdown item ...) from the user. I don't know react-route enough, so I never thought about multi-router (please share me a sample if possible), I'm using system.js to do it at the moment.

Also, because each ES6 web part may use any 3rd party lib as dependency, is there a better way to handle it than system.js.

Thank you for the help
Gary

---

Reply to this email directly or view it on GitHub:
#168 (comment)