VulcanJS / Vulcan

🌋 A toolkit to quickly build apps with React, GraphQL & Meteor
http://vulcanjs.org
MIT License
7.98k stars 1.88k forks source link

Dynamic routes don't receive props from router #1997

Closed Apollinaire closed 6 years ago

Apollinaire commented 6 years ago

Expected behaviour: Dynamic imports top level components should receive the same props as regular routes, i.e. props from withRouter (and most importantly the info from the url, such as a slug or id for routes like /movies/:slug ).

Current behaviour: The top level component in dynamic imports receives no props at all from withRouter

ochicf commented 6 years ago

Created PR https://github.com/VulcanJS/Vulcan/pull/2013

Now getDynamicComponent is deprecated, but two approaches can be used in order to accomplish what @Apollinaire commented in the issue:

renderDynamicComponent

More similar to the previous syntax, but I think it can become much more expensive and inefficient (more logic on each rerender, and I'm not sure how the dynamic import will behave and if it will incurr in any penalty).

import { addRoute, renderDynamicComponent } from 'meteor/vulcan:core';

addRoute({
  component: props => renderDynamicComponent(import('./path/to/RouteComponent'), props),
  // ...route options
});

dynamicLoader

I think this is the best approach, as it creates a component only once, that will execute the dynamic import on first mount.

import { addRoute, dynamicLoader } from 'meteor/vulcan:core';

addRoute({
  component: dynamicLoader(() => import('./path/to/RouteComponent')),
  // ...route options
});