Remount component on parameter change
See original GitHub issueConsider the following route definition:
'/users/:id': UserView
Navigating from /users/1
to /users/2
will not remount the example UserView component and therefore any actions (eg. fetching the targeted user) binded to onMount
are not triggered.
This seems to be intended (probably #L476) but what it is the reason behind that? Is it possible to add an optional config to force it?
ps. I’ve just checked other common js routers - it seems that they follow similar approach, but in my opinion having to “watch” the router parameters adds unnecessary boilerplate and overall it’s not the same as remounting/reinstantiating.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Component does not remount when route parameters ...
This will remount the page when the URL changes, forcing all the components in the page to be created and mounted again, not...
Read more >Component does not remount when route parameters ...
So basically what you want is the Component to get remounted whenever we find a change in params. Now react-router>6.0 has been released...
Read more >Rendering Components
Configuring The Layout Component; Route Parameters; Route Model Binding ... In Livewire components, you use mount() instead of a class constructor ...
Read more >Prevent the Component from Remounting on Prop Change
To prevent component remount for interactive widgets, there is a special key argument to ... This is implemented as a small change in...
Read more >React.Component
You can then force a component to “reset” its internal state by changing ... Any value returned by this lifecycle method will be...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It is done on purpose indeed, for the best user and developer experience 😃
What you can do is to watch for changes to params.id and reactively update your component.
You can see an example here: https://github.com/ItalyPaleAle/book-app-demo/blob/master/src/components/Book.svelte
@ItalyPaleAle, thanks for the answer. But you shouldn’t break existing behavior! What I (and others) ask for is simply the ability to switch existing behavior to “remount” the component. This setting can be turned off by default, so this change will not affect anyone. But users who need this “remount” can enable it in their projects.
Thanks