Passing Props to Route Components not work ?

[leo41271]

i am following Doc of Passing Props to Route Components

my code is :
// router/index.js

 // { path: "/prop-route/users/:id", component: OldUser },
    { path: "/prop-route/users/:id", name:"prop-new", component: NewUser, props: true },

<script setup>
import { ref } from 'vue';
import router from '@/router';
import NewUser from '@/views/PropstoRouteComponent/NewUser.vue';
import OldUser from '@/views/PropstoRouteComponent/OldUser.vue';
const change = ref(true)
</script>
<template>
    <li><router-link to="/prop-route/users/332">/prop-route/users/332</router-link></li>
    <NewUser></NewUser>
    <!-- <OldUser></OldUser> -->
</template>

<!-- NewUser.vue -->
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
    id: String
})
</script>
<template>
    <div>
        New User {{ id }}
    </div>
</template>

<!-- OldUser.vue -->
<template>
    <div>
        Old User {{ $route.params.id }}
    </div>
</template>

package.json

  "dependencies": {
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },

in OldUser component work good .
newUser is not
it only show "New User" but the {{ id }} didn't show.

i had reference some solution but still not work.
somehow like this
https://stackoverflow.com/questions/68182276/vue-router-passing-props-is-undefined
vuejs/vue-router#3140

1. props: true ->>> props: { id :true}
2. props: true ->>> { props: true }
   still not work .

[leo41271]

i finally found my mistake

change <NewUser></NewUser> to  <router-view></router-view>```