8

I'm using react-router-dom and what I want is to be able to close a Modal when I click browser back button.

Also, in my scenario, the modal component is not the part of Switch. So how can I close the modal.

Thanks in advance. :)

Hamidreza
  • 1,360
  • 11
  • 18
Shubham Bisht
  • 577
  • 2
  • 26
  • 51

3 Answers3

4

You could probably use something like this to detect the press of the Back button.

componentDidUpdate() {
  window.onpopstate = e => {
    
  }
}

And then, depending on your modal (Bootstrap or something else) you can call .hide() or .close().

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
sotirelisc
  • 392
  • 3
  • 14
  • 1
    Then when I close the Modal, how do I disable the back button in that case? – Shubham Bisht Jan 18 '20 at 09:56
  • You mean the other way around? You need to know (in your state) if the modal is closed and when "onpopstate" fires again you can e.preventDefault() it. But it may not work in every browser. – sotirelisc Jan 18 '20 at 19:17
  • No I mean, when I press the back button of Browser. I want the modal to be closed and not move back to previous screen – Shubham Bisht Jan 20 '20 at 09:40
0

I've made a simple hook called useAppendLocationState that does all the job:

function SomeComponent() {
    const [showModal , appendShowModal ] = useAppendLocationState('showModal');

    return (
        <div>
            <div>...some view...</div>
            <button onClick={() => appendOpenModal(true)}>open modal</button>
            {showModal && <SomeModal closeHandler={() => window.history.back()} />}
        </div>
    )
}

useAppendLocationState returns a array with two entries just like useState, The first entry is the state prop value coming from browser location state and the second entry is a method that pushes a new item to browser history with new state prop appended to current location state.

here is our useAppendLocationState definition:

import { useHistory } from 'react-router';

export function useAppendLocationState(key) {
    if (!key) throw new Error("key cannot be null or empty value")

    const history = useHistory()
    const currentLocationState = history.location.state;

    const appendStateItemValue = (value) => {
        const newLocationState = { ...currentLocationState }
        newLocationState[key] = value;
        history.push(history.location.pathname, newLocationState)
    }

    const stateItemValue = history.location.state && history.location.state[key]


    return [stateItemValue, appendStateItemValue]
}

export default useAppendLocationState
Mohammad Barbast
  • 1,753
  • 3
  • 17
  • 28
  • I had used a similar solution myself as well but has several drawbacks too. Example: User opens /home then /home#yourmodal then closes the site. The next time they open that page /home#yourmodal from history they don't see the modal anymore, or if that key is present in another page example /login#yourmodal and the props are missing – Kristi Jorgji Sep 12 '22 at 10:41
-6

Have you tried: ComponentWillUnmount?

A.Rhman Sayes
  • 241
  • 1
  • 5