从“react”导入React; const BlogDetails = () =>; { 返回 (); }; 导出默认 BlogDetails;</pre></p>ddd
<p>博客详细信息</p> <预>const data = []; data.push(“足球”);
</前>
P粉0435663142023-09-01 00:17:10
首先,在index.js文件中创建browserRouter
,并从app.js文件中移除它,并为BlogDetails component
创建一个Route
:
<BrowserRouter> <Routes> <Route path="/" element={<Home />}></Route> <Route path="/blogItem" element={<BlogItem />}></Route> <Route path="/blogDetails" element={<BlogDetails />}></Route> </Routes> </BrowserRouter>
然后你需要安装'react-router-dom'包。
npm i react-router-dom
在BlogItem.js文件中导入useNavigate
:
import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); // 在函数组件内部使用
现在你可以给你想要点击的element
添加onClick
,以便重定向到/blogDetails
,例如:
<div className="blogImageSection"
onClick={() =>
navigate('blogDetails', { state: {id, date, photo, heading, blogDetails } }) // 这是如何使用useNavigate传递数据的方法
}> ... </div>
最后,在BlogDetails.js文件中:
import { useLocation } from "react-router-dom"; const location = useLocation(); // 在函数组件内部使用
你可以像这样访问传递的数据:
const myRecievedData = location.state