Así que hice un enrutamiento tranquilo en mi aplicación de reacción y quiero acceder a los parámetros.

Y esto funciona:

 const TreeList = ( props ) => { return ( <div> <p>{`Trees filterd by ${props.match.params.searchBy}, with the key of ${props.match.params.key}.`}</p> </div> ) }

También lo hace esto:

 const TreeList = ( {match} ) => { return ( <div> <p>{`Trees filterd by ${match.params.searchBy}, with the key of ${match.params.key}.`}</p> </div> ) }

Pero cuando traté de desestructurarlo aún más, me encontré con la desestructuración anidada de JS, que debería verse así:

 const TreeList = ( {match: {params}} ) => { return ( <div> <h1>TreeList</h1> <p>{`Trees filterd by ${params.searchBy}, with the key of ${params.key}.`}</p> </div> ) }

Pero no funciona. :(