尝试将对象传递到另一个页面以做出反应

Question

我正在尝试创建一个博客页面，当您从主页 select 一个 link 时，它会为您提供一个详细页面（很像从产品）。我正在努力将每个博客对象传递到新的详细信息页面，然后显示此信息。我试过通过 props 和链接，但我尝试过的一切都没有定义。

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 页面

函数 BlogDetails( ) {

return (
    <div>
        Display 
    </div>
)

}

感谢所有帮助！！！

Answer 1

您可以使用 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;

尝试将对象传递到另一个页面以做出反应

Trying to pass an object to anothe page on react

reactjs

object

react-props