Link Component - How to set sessionStorage when target = _blank

[flenz00]

Summary

I have a table with each row having a "open in new tab" button. I need to set the row object in the sessionStorage to reuse it in the new tab, but the Link component with href prop it's not working as expected.

With this code, the sessionStorage is only set on the current tab but not on the new opened one.

<Link href={`/investigate/${row.original.id}`} target="_blank" onClick={() => sessionStorage.setItem("investigated_case",
          JSON.stringify(row.original)
)}

I came up with the following solution, using Link with empty href and an onClick handler which set the sessionStorage and then performs the window.open.

const handleClick = useCallback(() => {
        sessionStorage.setItem(
          "investigated_case",
          JSON.stringify(row.original)
        );
        window.open(`/investigate/${row.original.id}`, "_blank");

<Link href="" onClick={handleClick} />

Is this the correct way?

Additional information

No response

Example

No response

[icyJoseph]

I think... you have to add rel="opener" to the link

[flenz00]

Many thanks for the hint, but i think you meant rel instead of ref right? However, with rel = "opener" is working correctly.

[icyJoseph]

Ah yes... I typed too fast... if it worked, please don't forget to mark as answered. I corrected my comment.

[flenz00]

Perfect, thanks again for the help.