我正在嘗試制作一個博客頁面，當您從主頁選擇一個鏈接時，它會為您提供一個詳細頁面（就像從產品頁面打開產品詳細資訊頁面一樣）。我正在努力將每個博客物件傳遞到新的詳細資訊頁面，然后顯示此資訊。我嘗試過通過道具和鏈接，但我嘗試過的所有內容都未定義。
App.js - 包含到不同頁面的路由：
<div className="App">
<NavBar/>
<Router>
<Routes>
<Route path="/" exact element={<BlogPosts/>} />
<Route path="/detail/:id" exact element={<BlogDetails/>} />
</Routes>
</Router>
</div>
BlogPosts 是顯示博客的主頁。它映射所有博客以顯示它們。
<div>
<div className="BlogPosts">
{loader === false && (data.map((blog) => (
<div className="BlogContainer" key={blog.id}>
<img className="BlogImage" src={blog.image} alt={blog.title}/>
<div className="BlogTextContainer">
<h1 className="BlogTitle">{blog.title}</h1>
<h2 className="BlogDate">{blog.date}</h2>
<p className="BlogSummary">{blog.summary}</p>
<Link to={{
pathname: `/detail/${blog.id}`,
state: {
blogTitle: blog.title,
blogDate: blog.date,
},
}}
>
View {blog.title}
</Link>
</div>
</div>
)))}
</div>
</div>
我想顯示資料的 BlogDetails 頁面
功能博客詳細資訊（）{
return (
<div>
Display
</div>
)
}
感謝所有幫助！
uj5u.com熱心網友回復：
你可以用useLocation鉤子
在BlogPosts組件中，您Link應該是：
<Link
to={`/detail/${blog.id}`}
state={{
blogTitle: blog.title,
blogDate: blog.date
}}>
在BlogDetails組件中，您可以使用它useLocation：
import { useLocation } from 'react-router-dom';
const BlogDetails= () => {
const { state } = useLocation(); // Here we you destructuring, so you do not have to display values everywhere doing location.state
console.log(state); // so you can see your state
return (
<>
<p>{state.blogTitle}</p>
<p>{state.blogDate}</p>
</>
);
};
export default BlogDetails;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/450234.html
下一篇：使用物件重命名R中的變數