How to pass data to a component when it renders in new window

Question

I am rendering a component in new window using React router Link, now how to pass the data to this new component. The data i want to pass is JSON data so if i pass it as param or query its been displayed in URL.

So is there any other option available to pass the data while opening in new window?

Answer 1

Use one of the newer options:

• localStorage

• IndexedDB

• postMessage (https://plnkr.co/edit/YrG1KNrc1CvLCp8A1ucG)

  <script>
  var popup = window.open('data:text/html;charset=utf-8;base64,PHNjcmlwdD5mdW5jdGlvbiByZWNlaXZlTWVzc2FnZShldmVudCkgeyBldmVudC5zb3VyY2UucG9zdE1lc3NhZ2UoImhpIHRoZXJlIHlvdXJzZWxmISB0aGUgc2VjcmV0IHJlc3BvbnNlIGlzOiAiICsgZXZlbnQuZGF0YSwgIioiKTsgY29uc29sZS5sb2coIldlIHJlY2VpdmVkIHRoZSBtZXNzYWdlOiAiICsgZXZlbnQuZGF0YSk7IH0gd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoIm1lc3NhZ2UiLCByZWNlaXZlTWVzc2FnZSwgZmFsc2UpOzwvc2NyaXB0Pg==');
  
  function receiveMessage(event)
    {
    console.log("The message from the data:URI is: " + event.data );
    }
  
  function foo()
    {
    popup.postMessage("The user is 'bob' and the password is 'secret'", "*");
    popup.postMessage("hello there!", "*");
    }
  
  window.addEventListener("message", receiveMessage, false);
  window.setTimeout(foo, 2000);
  </script>
  

References

• Window.postMessage() - Web APIs | MDN

• Every known way to get references to windows in JavaScript

• How should I implement saving state to localStorage?

• Pull data from IndexedDB into array and output it via ReactJS

• Triggering Synthetic Event in React App

• A technique for saving content from a data:text/html, URI