Reactjs：点击标题显示博客文章内容答案

【问题标题】：Reactjs: On clicking title display blog post contentsReactjs：点击标题显示博客文章内容
【发布时间】：2021-06-24 02:26:50
【问题描述】：

我正在尝试使用 MERN 堆栈创建一个博客网站。所以在这里我有我的博客组件，它从数据库中获取所有博客文章并显示如下所示

这是上图的反应代码

import { useEffect, useState } from "react";
import axios from 'axios';
import BlogDetails from "./BlogDetails";

const Blogs = () => {
    const [blogPost, setPosts] = useState([])
    useEffect(()=>{
     const fetchBlog = async ()=>{
      const blogsData = await axios('http://localhost:4000/blogs')
      const blogsFetched = blogsData.data
      console.log(blogsFetched);
      setPosts(blogsFetched)
     }
     fetchBlog()   
    },[])
    return ( 
        <div className="blogs content">
          <h2>All Blogs</h2>
          { blogPost.map((post)=>(
            <div key={post._id}>
              <a className="single" href={post._id}>
              <h3 className="title" >{post.title}</h3>
              <p className="snippet">{post.snippet}</p>
              </a>
            </div>
          ))
          }
        </div>
    );
}
 
export default Blogs;

当我从上面的页面点击标题时，我想详细显示特定的博客文章。单击标题时，这些详细信息将作为道具传递给另一个名为 BlogDetails 的组件并被渲染。我被卡住的部分是使用 blogpost id 路由到 BlogDetails 组件。有什么方法可以在单击标题时使用 Route 来呈现 BlogDetails 组件？
请帮忙

【问题讨论】：

你可以将url推送到历史=> const history = useHistory(); history.push("detailurl")
你在使用 react 路由器吗？如果你是，你可以使用 useHistory 钩子，获取历史对象并使用特定的博客 ID 执行 history.push("/blog/{id}") 。然后在后续页面上，如果您想仅依赖 url，则可以使用 useLocation 并获取路径名。

标签： javascript reactjs mern

【解决方案1】：

假设您使用的是 react-router，您可以执行以下操作：

const history = useHistory();
.
.
.
<div onClick={() => history.push(`/blog/${post.id}`)}>
  <h3 className="title">{post.title}</h3>
</div>

然后您的路由器将渲染您指定为/blog 路由渲染的组件。在该路由中，您可以使用 useLocation 获取 url，然后通过拆分 url 来解析 id。

const { pathName } = useLocation(); // also from react-router

或者（更优雅），您可以在执行 history.push 时推送状态片段，例如：

...onClick={() => history.push(`/blog${post.id}`, { blogId: ${post.id}})}

然后在您随后渲染的组件中再次使用useLocation 来获得通过的状态：

const { state } = useLocation();

【讨论】：

【解决方案2】：

是的，你可以为 BlogDetail 组件使用路由

在 BrowserRouter 中添加 BlogDetail 链接

<Route path={'url'} render={(props) => <BlogDetail/>}/>

在博客组件中使用反应路由器 dom 的链接，然后在渲染 html 中的标题上使用此链接，如下所示

import { Link } from "react-router-dom";

 { blogPost.map((post)=>(
            <div key={post._id}>
              <a className="single" href={post._id}>
              
              <Link to={{
                    pathname:'url', // this will be your url of BlogDetail
                    state: post //if you want post object detail in next component
              }}>
                 <h3 className="title" >{post.title}</h3>
               </Link>
              <p className="snippet">{post.snippet}</p>
              </a>
            </div>
          ))
          }

【讨论】：