title: Pass Object to a React Component using Link in Typescript
body: <p>I was wondering if it is possible to pass an object as a parameter to a react-router-dom endpoint using react-router-dom-v6. I've seen some ways of doing it with Hooks but they require functions instead of components.</p>
  <p>This is the main component handling the Routes</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { BrowserRouter, Routes, Route } from &quot;react-router-dom&quot;;
  import { Home } from &quot;./Home&quot;;
  import { Page01 } from &quot;./Page01&quot;;
  import { Page02 } from &quot;./Page02&quot;;
  
  type TypeProps = { name:string }
  type TypeState  = { }
  
  class Main extends React.Component&lt;TypeProps, TypeState&gt; {
  
      constructor(props:TypeProps) {
          super(props);
          this.state = { };
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;BrowserRouter&gt;
                      &lt;Routes&gt;
                          &lt;Route path=&quot;/&quot; element={ &lt;Home name=&quot;home&quot;/&gt; }/&gt;
                          &lt;Route path=&quot;/page01&quot; element={ &lt;Page01 name=&quot;page01&quot;/&gt; }/&gt;
                          &lt;Route path=&quot;/page02&quot; element={ &lt;Page02 name=&quot;page02&quot;/&gt; }/&gt;
                      &lt;/Routes&gt;
                  &lt;/BrowserRouter&gt;
              &lt;/div&gt;
          );
      }
  
  }
  
  ReactDOM.render(&lt;Main name=&quot;main&quot; /&gt;, document.getElementById(&quot;main&quot;));
  </code></pre>
  <p>Then a basic component which is only handling the Link to method.</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  type TypeProps = { name:string }
  type TypeState  = { }
  
  class Page01 extends React.Component&lt;TypeProps, TypeState&gt; {
  
      constructor(props:TypeProps) {
          super(props);
          this.state = { };
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Link to={ &quot;/page02&quot; }&gt;
                      &lt;span&gt;Go To Page 02&lt;/span&gt;
                  &lt;/Link&gt;
              &lt;/div&gt;
          );
      }
  
  }
  
  export { Page01 }
  </code></pre>
  <p>And then an almost identical component at the other end which will need to receive this data.</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  type TypeProps = { name:string }
  type TypeState  = { }
  
  class Page02 extends React.Component&lt;TypeProps, TypeState&gt; {
  
      constructor(props:TypeProps) {
          super(props);
          this.state = { };
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Link to={ &quot;/page01&quot; }&gt;
                      &lt;span&gt;Go To Page 01&lt;/span&gt;
                  &lt;/Link&gt;
              &lt;/div&gt;
          );
      }
  
  }
  
  export { Page02 }
  </code></pre>
  <p>I've tried to pass the data with state</p>
  <pre><code>let paramData = {
      field01:&quot;data01&quot;,
      field02:&quot;data02&quot;
  }
  
  &lt;Link to={ &quot;/page02&quot; } state={{ paramData:paramData }}&gt;
      &lt;span&gt;Go To Page 02&lt;/span&gt;
  &lt;/Link&gt;
  </code></pre>
  <p>But I cannot receive it on the other end because the I'm using a component and not a function</p>