I use react-router-dom, but when i click on the button, the page is rendered on top of the main one.
I do not need a full-fledged menu with a page transition. I have a button in the component and when I click it, I need to go to the next pageenter image description here
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
App.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>
)
The <Router> needs to go around everything that you want to change when you navigate.
The picture suggests that you have something like:
<main>
{ users.map(user => <UserBlock {...user} /> }
</main>
in a parent component.
You need to do your routing there and not inside each one of the UserBlocks.