title: pass props with Lazy loading in react-router-dom v6
body: <p>I need to pass props to the lazy components.</p>
  <pre><code>const A = React.lazy(() =&gt; import(&quot;./A&quot;));
  
  function App() {
  return (
        &lt;Suspense fallback={&lt;GlobalLoader /&gt;}&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/s/:name&quot; element={&lt;ValidateName /&gt;} /&gt;
            &lt;Route path=&quot;/s&quot; element={&lt;Page fullsize={true}&gt;&lt;A name='default'/&gt;&lt;/Page&gt;} /&gt;
            &lt;Route path=&quot;*&quot; element={&lt;Navigate replace to='/s' /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/Suspense&gt;
  )
  }
  const Validatename = () =&gt; {
      const {name} = useParams();
      let allowedValues =[{'name':a, ... },{'name':b, ... },{'name':c, ... }]
      let validValue = allowedValues.filter((i)=&gt;i.name === name);
      let isValid = (validValue &gt; 0);
  
      if(!isValid) return &lt;Navigate replace to =='/s'&gt;
      return &lt;Page fullSize={true}&gt;&lt;A name={name}/&gt;&lt;/Page&gt;
  }
  </code></pre>
  <p>Edit:</p>
  <ol>
  <li>Desired outcome: Lazy Loading for Component A.</li>
  <li>Component A is initialised with either 'default' value or value passed in URL i.e. 'name'</li>
  <li>Which value to pass is decided by ValidateName Component and default route /s.</li>
  </ol>
  <p><strong>Problem: How to pass prop 'name' in A so that it can be loaded lazily.</strong></p>