React-router: Passing object to a new tab/window using <Link ... target="_blank">

[s3ungw00n]

I'm using redux, and react-router.

When I need to route and pass data to next component, I used <Link query={{ id : 'hint' }} ... >.

So next component can get hints from this.props.location.query, and use it to intended data from redux (subscribed) store.

But I need to change that link to new window, so I used <Link ... target="_blank">.

New window is opened and new component is loaded successfully, but the store of new window has empty(new) state. So I cannot find intended data from this store.

I was able to implement same functionality at my other jquery project, using window.opener, with global variable, like window.opener.getData()

Is there any way to access parent's store/state?

[ironyee]

+1

[timdorr]

You need to write your own link component to do this. target=_blank doesn't establish a parent/child relationship. You need to use something like window.open and window.postMessage. But this isn't something React Router would manage.

[msaron]

The problem is that when you open a new window, the redux application state in the new window is empty because it is totally separate from the window it came from. One way you may be able to do what you want is using <Link state={store.getState()} /> and then populate the complete redux state object in the new window using an action creator specifically designed to do this.

[s3ungw00n]

Thanks, Msaron.

I solved this issue almost same way you wrote. But I couldn't do with Link.
When I open a new window, it will have parent/child relationship. So I send state with sendMessage function and restore in new window. I implemented message wrapper component and its restoring state functionality.

If you have better upcoming solution, please reply :)
Thank you!

[msaron]

My philosophy is to use react-router with react-refetch when I have to open a new window with a link. React-refetch philosophy is that the url represents the state and that is what I try to use. I try to use redux as little as possible and react-refetch lets me do that.

[SubhuMS]

Hi @mazicky ,

Even i facing the same issue, could you please let me know how did you resolve this issue without using Link and passed the state to new window?

Thank You.

[s3ungw00n]

@SubhuMS
When you open the new window using window.open, you will get the instance of it.
You can send postMessage to it, and you will be able to send/receive state between windows.

I created and wrapped my whole element with <Popout> and <PoppedOut>, which send or receive state when popped out.

I hope it helps you, Please tell me you need a gist for this codes.

[Kannaj]

@mazicky - Would you mind posting a gist? I still am a bit unclear over how you managed to di it.

Thanks.

[debsush]

Yes, even I would like to have a gist for this code. Thank you in advance @mazicky

[msaron]

One other way you could do it is to store the state in local storage. When you open the new page link, check if local storage is not empty. If it is not empty, load the state from local storage and then clear the local storage state variable. local storage saves state across windows, whereas session storage stores state only in a single window.

[debsush]

This makes ton of sense

On 27 Feb 2017 10:45 p.m., "msaron" [e-mail] wrote:

One other way you could do it is to store the state in local storage. When
you open the new page link, check if local storage is not empty. If it is
not empty, load the state from local storage and then clear the local
storage state variable.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/3080#issuecomment-282864624,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AOYQSV7ioH4RVqpVwycyknQJx-81smZ3ks5rg0QPgaJpZM4HaRMZ
.

[daniel-van-niekerk]

One other way you could do it is to store the state in local storage. When you open the new page link, check if local storage is not empty. If it is not empty, load the state from local storage and then clear the local storage state variable. local storage saves state across windows, whereas session storage stores state only in a single window.

This is excellent thank you @msaron. Solved my problem with opening a preview page without having to save data to the server yet.