V4 Modals

Are we able to create the modals like in previous version of React Router? If I understand, now we can't use this.props.children. So how we can show the previous content when modal appears?

pinterest example in previous version

componentWillReceiveProps (nextProps) {
    if ((
      /* Something */
    )) {
      this.previousChildren = this.props.children
    }
  }

My stackoverflow question: http://stackoverflow.com/questions/42409175/react-router-v4-modal

[pshrmn]

With #4589, you should easily be able to create modals. That PR includes a modal example.

@pshrmn In your example modal appears but behind him is again something else than previous page...

[pshrmn]

@marekkobida Did you clone that branch? It relies on the changes in there to work.

@pshrmn If modal appears and then I will press CMD+R, modal still remains on the screen. Why it don't restart the component state?

[pshrmn]

When refreshing, you are at the same location, so it still has the state: { modal: true }.

@pshrmn Yes but how can we prevent this? If I reload the page, state remains { modal: true } and when I click on Close button, Gallery apears (not Image page). This is completely different from what I wanted in this issue. When I click on Close button, behind modal page must appear... not Gallery (the previous page from which I came). Thank you in advance for answer and probably correct solution.

UPDATE: Likely solution:

ModalSwitch >> componentWillMount

const { state } = this.props.location

if (state && state.modal) {
  state.modal = false
}

[pshrmn]

On refresh, the <ModalSwitch> would be mounting, so this.previousLocation would be the same as this.props.location. You could probably modify this line to only show the modal when those two objects are different.

const isModal = !!(location.state && location.state.modal && location !== this.previousLocation)