title: unable to use Route children vs Route component with react-router-dom
body: <p>I saw that using <code>&lt;React component&gt;</code> and <code>&lt;React render&gt;</code>, may be deprecated in react-router-dom 6.x, so i followed the <a href="https://github.com/ReactTraining/react-router/blob/dev/docs/advanced-guides/migrating-5-to-6.md" rel="nofollow noreferrer">migration steps</a> of removing the <code>component</code> property, and instead nesting the component as a child of the <code>&lt;Route &gt;</code> node. it worked fine until i got to my routes that use dynamic parameters, and it threw an error.</p>
  
  <p>i changed from...</p>
  
  <pre><code>&lt;Route exact path={`/:category`} component={CategoryPage} /&gt;
  </code></pre>
  
  <p>to...</p>
  
  <pre><code>&lt;Route exact path={`/:category`}&gt;
    &lt;CategoryPage /&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>the error is</p>
  
  <pre class="lang-sh prettyprint-override"><code>Exception has occurred: TypeError: Cannot read property 'params' of undefined
    at selectParams
  </code></pre>
  
  <p>it seems pretty straightforward, so is there anything else i need to look at that might be causing this?</p>
  
  <h3>UPDATE</h3>
  
  <p>i am using <code>useParams</code> in my categoryPage, which works fine while using <code>&lt;React component&gt;</code></p>
  
  <pre><code>const CategoryPage = () =&gt; {
    const { category } = useParams()
    ...
  </code></pre>