// src/article/show.js

port React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
                                             
function ArticleDetail() {
   // 初始化为 null，避免初始渲染时显示空的文章
   const [article, setArticle] = useState(null);
   
   const { id } = useParams();
   // 检查路由参数的值
   console.log(id);
   useEffect(() => {
   const fetchArticle = async () => {
     try {
       const response = await axios.get(`http://your-api-url/articles/${id}`);
       // 检查返回的数据结构                                                                          
       console.log(response.data);
       setArticle(response.data);                                                                     
     } catch (error) {                                                                                
       console.error("请求错误:", error);                                                             
     }
   };
       
    fetchArticle();
  }, [id]); // 将 id 添加到依赖数组中，以便在 id 改变时重新获取文章
           
  return (  
     <div>     
     {/* 添加条件表达式的判断 */}
      {article && (
         <div> 
           <h2>{article.title}</h2>                                                   
           <p>{article.created_at}</p>                                                                
           <p>{article.content }</p>                              
         </div>
       )}
     </div>
   );
}  

export default ArticleDetail;

  <p>{article.content }</p>                               

<p dangerouslySetInnerHTML={{ __html: article.content }}></p>