Element - Route definitions seem to be using same instance of element

[kevinfairclough]

Hi

I have routes configured like so:

{ path: ':MyScreen/New', element: <MyScreen />, loader: MyScreenDataLoader(args) },
{ path: ':MyScreen/Edit/:id', element: <MyScreen />, loader: MyScreenDataLoader(args) },

When i navigate(...) from inside MyScreen from an Edit route to a New route it seems to re-use the same instance of element MyScreen. React or the Router doesn't create a new element. Is there a prop on the route def to do this, I cant seem to find any docs for this.

I can add a key="new" on the element to force this but can't do this when I need to navigate to different id's and I want new Screens each time.

TIA
Kevin

[timdorr]

This is just how React renders. If you provide it the same tree of elements between renders, it will re-use those instances. The key prop is the best way to tell React you have different instances.

[kevinfairclough]

Hi thanks for the reply.

So in the route definition above are there 2 instances of MyScreen or 1 ?

[yuki2006]

React Router seems to try to stay true to the React philosophy.

However, the actual famous library is a little impure to match the real problem.
(e.g. use-query-param, antD..)
I think it would be great if React Router could compromise a little.

Well, for example, it may be possible by using this library.

https://github.com/skt-t1-byungi/react-router-refreshable