title: Nested destructuring doesn't work in React?
body: <p>So i have done some restful routing in my react app and want to access the parameters.</p>
  <p>And this does work:</p>
  <pre><code>const TreeList = ( props ) =&gt; {
      return (
          &lt;div&gt;
              &lt;p&gt;{`Trees filterd by ${props.match.params.searchBy}, with the key of ${props.match.params.key}.`}&lt;/p&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>So does this:</p>
  <pre><code>const TreeList = ( {match} ) =&gt; {
      return (
          &lt;div&gt;
              &lt;p&gt;{`Trees filterd by ${match.params.searchBy}, with the key of ${match.params.key}.`}&lt;/p&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>But when I tried to destructure it further, I came across JS nested destructuring, which should look like this:</p>
  <pre><code>const TreeList = ( {match: {params}} ) =&gt; {
      return (
          &lt;div&gt;
              &lt;h1&gt;TreeList&lt;/h1&gt;
              &lt;p&gt;{`Trees filterd by ${params.searchBy}, with the key of ${params.key}.`}&lt;/p&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>But it doesn't work. :(</p>