<p>點擊blogItem時，我該如何將資料從<code>blogItem.js</code>元件傳遞到<code>blogDetails.js</code>元件？然而，blogItem元件是在Home.js元件中導入的。請問我該在哪裡加入點擊動作？有人可以分享一個例子嗎？ </p>
<p>CodeSandboX鏈接
https://codesandbox.io/s/gallant-water-5bmueq?file=/src/blogItem.js:0-1876</p>
<pre class="brush:php;toolbar:false;">// App.js
import { BrowserRouter, Route, Routes, Switch } from "react-router-dom";
import Home from "./src/Home";
import BlogItem from "./src/blogItem";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/blogItem" element={<BlogItem />}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
//Home.js
import "./styles.css";
import React, { useState, useEffect, useCallback } from "react";
import BlogItem from "./blogItem";
const Home = (props) => {
const [blogItem, setBlogItem] = useState(props);
useEffect(() => {
setBlogItem(props);
}, [props]);
return (
<div id="App">
<BlogItem />
</div>
）；
};
導出預設首頁；
// BlogItem.js
導入“./styles.css”；
從「react」導入 React, { useState, useEffect, useCallback };
常量部落格資料 = [
{
編號: 1,
日期：“2023 年 1 月 25 日”，
照片：“https://picsum.photos/80”，
標題：“賽普拉斯設定部落格”，
部落格詳細資訊：
“此處添加了最佳標題。此處新增了最相關的數據。有史以來最偉大的。總是在這裡打球不是一個好主意。”
},
{
編號: 2,
日期：“2022 年 1 月 22 日”，
照片：“https://picsum.photos/80”，
標題：“反應狀態詳細資訊”，
部落格詳細資訊：
“此處添加了最佳標題。此處新增了最相關的數據。有史以來最偉大的。總是在這裡打球不是一個好主意。”
}
];
const BlogItem = ({ id, 日期, 照片, 標題, blogDetails }) =>; {
const [searchResults, setSearchResults] = useState(blogData);
const [state, setState] = useState({ id, 日期, 照片, 標題, blogDetails });
const 列 = () => （
{searchResults.map(({ id, 日期, 照片, 標題, blogDetails }) => (
<鍵={id}>
<img alt=“id” src={照片} //>
{日期}
cypress
{標題}
<p>
此處新增了最佳標題。此處新增了最相關的數據。
有史以來最偉大的。總是在這裡玩不是一個好主意。
</p>
閱讀更多→
</a>
</a>
))}
;
）；
return <列 {...state} />;
};
導出預設 BlogItem;</pre>
<p>// BlogDetails.js</p>
從「react」匯入React；
const BlogDetails = () =>; {
返回 （
ddd
<p>部落格詳細資料</p>
<預>
const data = []; data.push(“足球”);
</前>
）；
};
匯出預設 BlogDetails;</pre></p> 
首先，在index.js檔案中建立
browserRouter，並從app.js檔案中移除它，並為BlogDetailscomponent建立一個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'套件。
在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(); // 在函数组件内部使用你可以這樣存取傳遞的資料：