prateekbh / preact-async-route

Async route component for preact-router
MIT License
138 stars 14 forks source link

Wildcard paths not getting rerendered on path change. #38

Closed skoshx closed 4 years ago

skoshx commented 4 years ago

I have a wildcard path like this: <AsyncRoute path="/plugin/:name" getComponent={func}

The first time i navigate to /plugin/pluginName getComponent gets called correctly with {name: 'pluginName'}. After that, when i navigate to /plugin/otherPlugin, The getComponent doesn't get called, stopping me from rerendering it properly with new plugin.

Here is a minimal recreation: CodeSandbox recreation

skoshx commented 4 years ago

@prateekbh CC. This issue still persists and I personally still havent found a solution.

prateekbh commented 4 years ago

I dont see whats the problem here. I created: https://codesandbox.io/s/vigilant-hawking-bqc6t

As you can see the plugin name updates as you route through different routes.

Is it that you're expecting the alert to be called again? if yes, then it wont be called. Once the promise for the component is resolved then the resolved value is re-used and the function is not called again and again.

skoshx commented 4 years ago

@prateekbh Yes, im expecting the alert to be called again... I want to get the component based on the value provided by the path so for path /plugin/blog, I can dynamically import('/plugin/${name}') the plugin. This is why i need the alert to be called again, so i can load the new plugin when the path changes.

Isn't it default behaviour that the getComponent function gets called each time the patch changes? Otherwise, what is the point of having wildcard paths if you cannot use the paths to rerender your content?

prateekbh commented 4 years ago

Nope, the paths with preact-router needs to be declared upfront.

Otherwise, what is the point of having wildcard paths if you cannot use the paths to rerender your content?

The point of wildcards is matching path variable. e.g. all path like /product/productname would still load productpage component but send productname as a prop to productpage component.

Inside productpage component feel free to have conditional import statements but top level routes will need to be declared upfront so that on routeChange the router could map to the URL to one of the declared components

Isn't it default behaviour that the getComponent function gets called each time the patch changes?

Nope it just gets called when trying to fetch the component, then re-uses it

skoshx commented 4 years ago

@prateekbh Oh ok! Thank you for clarifying the way the paths get updated! Works perfectly the way you described it by using an intermediate Plugin component that dynamically loads the plugins. Thanks!