如何解决如何在不使用 React 中的 Link 标签的情况下使用浏览器的按钮返回上一页?
在我的代码中,我设置了反应路由,因此,当点击链接时,浏览器中的 URL 会发生变化。据我所知,链接标签在单击时将路由添加到路由历史记录中,在我的情况下,这非常有效。我可以使用浏览器的后退和前进按钮移动就好了,但问题是,如果我手动导航到链接(例如通过在 URLhttps://il72h.csb.app/products
中键入 /products 导航到产品),我无法通过单击浏览器的后退按钮进入主页(https://il72h.csb.app/
),我被困在产品页面上。当组件被渲染时,我尝试将路由推送到历史记录,但没有帮助。
这是路由代码:
import Productpage from "./productpage";
import Aboutpage from "./aboutpage";
import AProductPage from "./individualProductPage";
import Contactpage from "./contact";
import { BrowserRouter as Router,Switch,Route,Link } from "react-router-dom";
export default function App() {
return (
<div className="App">
<Router>
<Route exact path="/">
<ul>
<Link to="/products">
<li>products</li>
</Link>
<Link to="/about">
<li>about</li>
</Link>
</ul>
</Route>
<Route exact path="/about">
<Aboutpage />
</Route>
<Route exact path="/products">
<Productpage />
</Route>
<Route path="/products/:id">
<AProductPage />
</Route>
{/* <Route exact path="/o">
<Contactpage />
</Route> */}
</Router>
</div>
);
}
我如何尝试将路由推送到历史记录:
import { Link,useHistory,useLocation } from "react-router-dom";
import Products from "./products";
export default function Productpage() {
let history = useHistory();
history.push("/products");
console.log(history)
return (
<div>
</div>
);
}
我该如何解决这个问题?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。