0

would anybody here know if it's possible to do something like what happens in this screen recording? https://www.dropbox.com/s/snhhbeq8knk5dyc/modal-window-routing.mp4?dl=0

It's about routing a modal window, while keeping the UI underneath intact. Normally I'd say that to achieve this in React router the URL would need to encode both what's behind, and the modal. Maybe with some nesting scheme (e.g. /mainview/settings/general). But Outlook web manages to do so while not reflecting in the URL the view that was present when the modal was fired.

Note in the recording how the URL for the settings modal is the same, regardless of whether you open it from the Drafts or the Sent Items or wherever. However, the view from which you opened is kept rendered, and it's where you go back to when you close the modal.

Ernesto
  • 3,837
  • 6
  • 35
  • 56
  • 2
    https://reactrouter.com/web/example/modal-gallery straight from the react-router-dom docs – Rob Terrell Jan 11 '21 at 22:45
  • Thanks! I'm in React router v6 so I'll see if it can be adapted, but looks promising. – Ernesto Jan 11 '21 at 22:57
  • Unfortunately, it does not yet work in react-router v6. The `Routes` component (which replaces the v5 `Switch` component) does not yet have a `location` prop (https://github.com/ReactTraining/react-router/issues/7117). But still, @RobertTerrell's answer is correct. Care to add it as a proper answer so I can mark it as such? – Ernesto Jan 12 '21 at 16:27
  • I have input my answer, thanks! – Rob Terrell Jan 12 '21 at 22:35

1 Answers1

1

according to the react-router-dom documentation, the following link lays out the proper way to go about achieving your desired result https://reactrouter.com/web/example/modal-gallery

Rob Terrell
  • 2,398
  • 1
  • 14
  • 36
  • A caveat: it does not yet work in react-router v6. The `Routes` component (which replaces the v5 `Switch` component) does not yet have a `location` prop (github.com/ReactTraining/react-router/issues/7117). – Ernesto Jan 13 '21 at 13:44