So i have done some restful routing in my react app and want to access the parameters.

And this does work:

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

So does this:

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

But when I tried to destructure it further, I came across JS nested destructuring, which should look like this:

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

But it doesn't work. :(