反应路由器嵌套路由不起作用

Question

I am using react router v6 and trying to nest routers to switch only a particular div of the page.

I tried doing this

<div className="user-profile-page">
    <div className="user-profile-page-background">
        <img className="full-img" src = {user.profile_picture_url} />
    </div>
    <div className = "user-profile-contents-container">
        <h1 className="user-profile-name ellipsis">{user.full_name} ({user.age})</h1>
        <div className = "user-profile-nav">
            <NavLink to = "" className={(state)=>!state.isActive?"user-profile-nav-item":"user-profile-nav-item user-profile-nav-item-active"}>
                About
            </NavLink>
            <NavLink to = "pictures" className={(state)=>!state.isActive?"user-profile-nav-item":"user-profile-nav-item user-profile-nav-item-active"}>
                Pictures
            </NavLink>
        </div>
        <div className = "user-profile-contents-main">
            <Routes>
                <Route index={true} element = {<UserProfileAbout />} />
                <Route path = "pictures" element =  {<UserProfilePictures />} />
            </Routes>
        </div>
    </div>
</div>

but when I go to "/user/pictures" instead of just changing the contents inside "user-profile-contents-main" div . It changes the whole page.

Here is my main router

<Routes>
    <Route path = "/" element = {<HomePage /> } />
    <Route path = "/message/:uid" element = {<ChatPage />} />
    <Route path = "/user/:uid" element = {<UserProfilePage />} />
</Routes>

EDIT

all i had to do was

<Routes>
    <Route path = "/" element = {<HomePage /> } />
    <Route path = "/message/:uid" element = {<ChatPage />} />
    <Route path = "/user/:uid/*" element = {<UserProfilePage />} />
</Routes>

add /* in the route path

Answer 1

 <Routes>
    <Route index={true} element = {<UserProfileAbout />} />
    <Route path = "pictures" element =  {<UserProfilePictures />} />
 </Routes>

no need to declare a new navigation inside the component in which it should be called, if you want to isolate some screens it is better to create a separate stack for them