locationModifier as a new property for Routes and an option of createRouter to enable support for backgroundLocation

[simongajdosech]

Currently there is no good way to support rendering background location of previous page of dialog routes, as discussed in #9864 .

One way to do modal routes is to have a constraint that says: modal dialog route must be child of background location route (for example /gallery as background location and /gallery/img/:id as modal route). Modeling that is straightforward, but there is a limitation, that the modal must only be opened from the one parent location, otherwise the background will change (for example if you open /gallery/img/:id from homepage, the background will change from homepage to that of /gallery).

Other way is to use <Routes location={location.state?.backgroundLocation || location}> as in the modal example. It has 2 major problems:

• it doesn't allow use of background location on data routes
• it's buggy - location property on Routes results in creation of LocationContext, which rerenders the Routes element on every use of navigate, so useNavigationType returns always 'POP'

Therefore, I propose to have a new property of Routes element: locationModifier of type (location: Location) => Location. It should also be an option of createRouter and createBrowserRouter. It must not alter LocationContext, the location alteration will be applied only to determination of route.

So the usage would be:
<Routes locationModifier={location => location.state?.backgroundLocation || location}>...</Routes> const router = createBrowserRouter([...], {locationModifier: location => location.state?.backgroundLocation || location})} />

Are there any hidden problems with this approach? If I do a PR would it be approved? Thanks.