Uso react-router-dom, pero cuando hago clic en el botón, la página se muestra encima de la principal.

No necesito un menú completo con una transición de página. Tengo un botón en el componente y cuando hago clic en él, necesito ir a la página siguiente. Ingrese la descripción de la imagen aquí .

ingrese la descripción de la imagen aquí

 import React from "react" import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom' import Profile from "../../profile/profile" import "./UserBlock.scss" const UserBlock = ({name,city,company}) => { return ( <Router> <div className="userBlock"> <div className="userBlock__info"> <div><strong>ФИО: </strong>{name}</div> <div><strong>Город:</strong> {city}</div> <div><strong>Компания:</strong> {company}</div> <button><Link to="/profile">Подробнее</Link></button> </div> </div> <Routes> <Route path="/App" element={<App/>}/> <Route path="/profile" element={<Profile/>}/> </Routes> </Router> ) } export default UserBlock

Aplicación.JS

 return( <div className='usersList'> <div className='usersList__sidebar'> <span>Сортировка</span> <SortButton button={sortCity} text="по городу" /> <SortButton button={sortCompany} text="по компании"/> </div> <div className="usersList__lists"> <h3>Список пользователей</h3> {isLoaded ? <img src={preloader} alt="preloader"/> : ( <div className="usersList__items"> {users.map(user => ( <div className="usersList__userCard"> <UserBlock key={user.id} name={user.name} city={user.address.city} company={user.company.name}/> </div> ))} <span>Найдено {count} пользователей</span> </div>)} </div> </div> )