如何保留在同一页面上并在react js中呈现不同的组件

Question

我的主页上有导航栏，并且我想在单击同一主页上导航栏上的链接后呈现客户详细信息，而无需转到其他页面

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 *（您在评论中说）“家”和“关于”是您的朋友（您可以随意命名）

import {BrowserRouter, Route, 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>