Location state not passed when inside iframe on Safari (mobile and desktop).

[stef40]

Hi Guys,

I have been struggling with this error for the past week and ran out of ideas. So I would greatly appreciate any help or directions.
I am building a Shopify app with react. The app itself is rendered in an iframe of the Shopify administration.

For routing we are using the react-router-6 with BrowserRouter(same happens with HashRouter). The issue happens only on Safari (mobile and desktop).

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.10.0",

I have the following code for navigating and passing state. Either like this

<Link to="/instant-page" state={{ test: 'test', test2: 'test2' }}>Instant Page</Link>

or like this:

let navigate = useNavigate();
navigate('/instant-page', { state: { test: 'test1', test: 'test'} })

Then in another component I am using the useLocation hook to get the current location so that I can get the state that was being passed. When I log to the console this location object the state is always null and the key is always "default". I tried to narrow down the issue and think that on Safari when pushing the new state to the window.history, the window history is the object from the main document and not the one within the iframe. So trying to push the state to the main document history, which is not allowed and the push fails. And then the router defaults to having a key of "default" and state equals to null.

Has anyone experienced something similar or have any ideas on what the problem might be.

Thanks in advance.

[cfinicolas]

I have the same issue but with navigate. the state is null whenever I try to access it on the Hello page. This only happens on Safari.

navigate(/hello-page/`, {
    state: {
        foo: "bar"
    }
})

Did find any answers to this yet?

[tatsmaki]

Here is the related stackoverflow answer https://stackoverflow.com/a/29859214

The problem is that iframe has src attribute, and react-router uses window.history.pushState() to set history entry. Safari creates 2 history entries:

1. from manually pushed state
2. from changed iframe url (unwanted side-effect).

And the second entry does not have any state.

The most clean solution would be to use query parameters instead

navigate('/page?test=value')

or https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString

const query = new URLSearchParams()

query.append('test', 'value')
navigate('/page?' + query.toString())

or https://reactrouter.com/en/main/hooks/use-search-params

Also you can try

navigate(...)
if (isSafari) {
   setTimeout(() =>  window.history.back())
}

Bad hack approach is to remove iframe from DOM before navigation. I don't know if you'll be able to return it back, this is why query parameters are recommended.

const iframe = document.getElementById('iframe')

navigate(...)
iframe.parentNode.removeChild(iframe);
setTimeout(() => {
    iframe.parentNode.append(iframe)
})