如何保持在同一页面上并在 React JS 中呈现不同的组件

Question

我的主页上有导航栏，我想在单击同一主页导航栏上的 link 后呈现我的客户详细信息，而不转到不同的页面

Answer 1

我建议使用 react-router，但如果您想要这样，可以通过以下方式完成：

const [page, setPage] = useState(1)
<div onClick={()=>setPage(1)}> Page 1 </div>
<div onClick={()=>setPage(2)}> Page 2</div>

{
  page===1 && <h1>page 1 componenet here</h1>
}
{
  page===2 && <h1>page 2 componenet here</h1>
}

因为你使用了react-router*（你在评论中说） Home 和 About 是您的组件（您可以随意命名）

import {BrowserRouter, Route,NavLink, Switch } from "react-router-dom";
<BrowserRouter>
    <NavLink to="/home">Home</NavLink>
    <NavLink to="/about">About</NavLink>

    <Switch>
        <Route path="/home"  component={Home} />
        <Route path="/about" exact component={About} />
    </Switch>
</BrowserRouter>

如何保持在同一页面上并在 React JS 中呈现不同的组件

How to stay on same page and render different component in react js

uinavigationbar

reactjs

react-router