Using a Radix Dialog with a react-router route

[jogilvyt]

I would like to use a Radix Dialog with react-router, and mount the Dialog at a specified route. Ideally it would be great if I could just do something like this:

<Route path="/some-path" element={<Page />}>
  <Route path="/dialog-route" element={<Dialog />} />
</Route>

However, this isn't really possible because the Dialog component needs to wrap both the trigger and the content, in order to return focus to the trigger when the Dialog closes (this is important and I want to keep this functionality). With the set up above, that would mean the trigger also only gets rendered when the route is matched.

I was wondering if anyone has implemented something similar to this, or has any ideas about how best to handle it? Currently I am getting around this by checking the location.pathname inside the Dialog and setting the open state based on whether the string matches /dialog-route but this doesn't feel like a very robust implementation.

Any help or ideas would be really appreciated. Thanks!