How would I use to display a Modal component?

[juliomuhlbauer]

I want to control a modal open state by a query param. But when the user goes back the navigation, I want to make a router back instead of a push and let the user go back in the history to dismiss the modal.

[franky47]

TL;DR: if you want to use the Back button to dismiss the modal, you can use history: 'push' to open it, but you'll have to be careful about how you implement the X button (or any UI that also closes the modal).

Simply calling router.back() there isn't going to cut it if your user landed on the page initially (they would end up in New Tab instead of closing the modal). You can detect that with the history.length property:

<CloseButton onClick={() => {
	if (history.length === 1) {
		// We landed on this page directly with the modal open, eg clicking a link
		setModalOpen(false, { history: 'replace' })
	} else {
		router.back()
	}
}} />

Longer version

That is a good question, and a classic case where using the history: push option can land you in trouble (hijacking the Back button).

Let's start by the various states you can get your app into, assuming the modal is on page /with-modal, and the search param is modalOpen=true|false, with a default value of false.

1. User starts at /with-modal
2. User starts at /with-modal?modalOpen=true
3. User starts at /other-page, navigates to /with-modal
4. User starts at /other-page, navigates to /with-modal?modalOpen=true

If the user were to press Back for each of these cases, they should land:

1. On a New Tab page
2. On a New Tab page (they didn't do any other navigation)
3. On /other-page
4. On /other-page (same reason as 2.)

Now if the user were to close the modal instead (using a X button for example), they should land:

1. Not possible (modal is closed)
2. On /with-modal
3. Not possible (same)
4. On /with-modal

Using the Back button at this stage should not re-open the modal, so this is a replace operation:

<CloseButton onClick={() => setModalOpen(false, { history: 'replace' })} />

But now we have an issue: if opening the modal is a push operation, then closing it with the X then doing Back breaks navigation: you'd have two /with-modal at the top of your navigation stack.

So we need to have a consistent behaviour, and use the back navigation on the X button too. But only if we have a place to go to (ie: not a New Tab page).