有没有办法不用React Routers重新加载整个html主体

Question

我的React项目的App.js文件有这样的路由：

<div>
<Background />
<Navbarr />
<Switch>
<Route path="/" component={Home} exact />
<Route path="/news" component={News} />
<Route path="/reserve" component={Reserve} />
<Route path="/admin" component={Admin} />
</Switch>
</div>

在我的Navbarr组件中，我有设置路线的链接，例如：

<Nav.Link
href="/news"
name="news"
active={active === "/news"}
onClick={() => setActive("/news")} 
>
News
</Nav.Link>

当我点击任何链接时，我希望它只更改我的<切换>。相反，它似乎重新加载了整个html主体(我的背景组件会闪烁，尽管它有相同的图片(。

有办法做到这一点吗？

Answer 1

您可以使用react-router-dom的Link，并使用to道具而不是href来使用客户端路由

import { Link } from "react-router-dom";
<Link
to="/news"
name="news"
active={active === "/news"}
onClick={() => setActive("/news")} 
>
News
</Link>

---

或者，您可以利用React引导的as道具

import { Link } from "react-router-dom";
<Nav.Link
as={Link} // --> render as react-router-dom Link
to="/news"
name="news"
active={active === "/news"}
onClick={() => setActive("/news")}
>
News
</Nav.Link>