Description
I upgraded Reach Router a while back from 1.2.1 to 1.3.4, and I've noticed a change in behavior since 1.3.0 (bug or intended, you tell me :) ). Basically, I have a bunch of routes that look like this:
<Router>
<ListPage path = '/' />
<ListPage path = '/add' showAdd />
<ListPage path = '/:id' showSummary />
<ListPage path = '/:id/details' showDetails />
<ListPage path = '/:id/edit' showEdit />
</Router>
Where ListPage
is a component that shows a listing of items, and possibly also a form to create a new item, or the summary view, details view, or edit form for an existing item. The component also has some internal state (standard useState
stuff) to keep track of sort order, which is where the problems begin.
In 1.2.1, if you navigate from, say, /
to /add
, you only get a change in props (showAdd
goes from false to true), whereas in 1.3.4, it unmounts the component with path='/'
, and subsequently mounts the component with path='/add'
. This unmount/mount sequence means that the state inside ListPage
is wiped clean, and I lose sort order and other things.
The only case in 1.3.4 where a remount isn't triggered if you go from one /:id
to another (say from /123
to /456
).
I've made a fairly minimal reproduction example at https://github.com/gustafc/reach-remounts
My question is:
- Is this change intended?
- Are there any clever ways of avoiding unmount/mount without resorting to doing my own URL parsing?