为什么我需要为路由参数使用大括号？

Question

I am using react navigation v5 and I am pushing a parameter from one screen to another. I made it work, but I cannot understand, why I need to use the curly brackets there. And where would I add the props parameter?

1 screen
<TouchableOpacity onPress={() => { nav.navigate('userProfile', { userId: 1 }) }} >

2 screen
const userProfile = ({ route }) => {
    const { id } = route.params;
    return (
        <View>
            <Text>{id}</Text>
        </View>
    )
}

As I said it is working as this, but usually I have something like

const userProfile = (props) => 

How would I add props to the 2 screen? And why do I need to use the curly brackets and how do I know if I can add it as a parameter like props or if I need to use the brackets.

Thanks!

Update: I found out, that it is also working with props.route.params.id. I am very confused now.

Answer 1

This is called Destructuring in javascript...

here you're extracting route out of userProfile props

const userProfile = ({ route }) => {

which is equivalent to

const userProfile = (props) => {
  const route = props.route;
};

==

const userProfile = (props) => {
  const { route } = props;
};