Estoy usando reaccionar enrutador v6 e intento anidar enrutadores para cambiar solo un div particular de la página.

Traté de hacer esto

 <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>

pero cuando voy a "/user/pictures" en lugar de simplemente cambiar el contenido dentro "user-profile-contents-main" div . Cambia toda la página.

Aquí está mi enrutador principal

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

EDITAR

todo lo que tenía que hacer era

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

agregar /* en la ruta de la ruta