新しいウィンドウでレンダリングするときにコンポーネントにデータを渡す方法

Question

React router Linkを使用して新しいウィンドウでコンポーネントをレンダリングしていますが、この新しいコンポーネントにデータを渡す方法があります。私が渡したいデータはJSONデータなので、URLに表示されているparamまたはqueryとして渡します。

新しいウィンドウで開くときにデータを渡すための他のオプションはありますか？

Answer 1

使用新しいオプションの1：

• の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> 
  

REFE rences

• 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