如何导航到另一个页面以做出反应？

Question

我使用 react-router-dom，但是当我点击按钮时，页面呈现在主页面之上。

我不需要带有页面转换的完整菜单。我在组件中有一个按钮，当我点击它时，我需要转到下一页enter image description here

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

Answer 1

<Router> 需要绕过您导航时要更改的所有内容。

图片表明你有这样的东西：

<main>
    { users.map(user => <UserBlock {...user} /> }
</main>

在父组件中。

您需要在那里进行路由，而不是在每个 UserBlock 内部。

如何导航到另一个页面以做出反应？

How can I navigate to another page in react?

javascript

reactjs

react-router-dom