React Router中Link跳转无法传递数组对象值至目标组件求助

问题根源 #

1. 变量解构丢失原item引用：在Titlecard组件中，你直接解构了props.item的内部属性，但未保留原item变量，导致传递state={{ item }}时，item实际为undefined。
2. 路由路径大小写不一致：App.js中路由路径是newscontent（小写开头），但Link的to是/Newscontent（大写开头），部分环境下会引发路由匹配异常，间接影响state传递。

修复步骤 #

1. 修正Titlecard组件的变量解构 #

保留原item变量，再解构内部属性：

const Titlecard = ({ item }) => {
  // 从item中解构需要的属性，同时保留原item引用
  const { id, imagePath, category, contentTitle, newsContent, authorName, time } = item;
  
  return (
    <>
      <Link 
        to="/newscontent"  // 统一路径大小写
        state={{ item }}         
      >
        Read Article
      </Link>
      {/* 其他组件内容 */}
    </>
  )
};

2. 统一路由路径大小写（可选但推荐） #

确保App.js中的路由路径和Link的to完全一致：

<BrowserRouter>
  <Header />
  <Routes>
    {/* 路径统一为小写，和Link的to匹配 */}
    <Route path="/newscontent" element={<Newscontent />} />
  </Routes>
  <Footer />
</BrowserRouter>

3. 在Newscontent中正确读取state #

添加可选链避免undefined报错：

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

const Newscontent = () => {
  const location = useLocation();
  // 使用可选链安全访问state中的item
  const articleItem = location.state?.item;
  console.log(articleItem);
  
  return (
    <div>
      {articleItem ? (
        <div>
          <h2>{articleItem.contentTitle}</h2>
          <p>{articleItem.newsContent}</p>
          {/* 渲染其他需要的属性 */}
        </div>
      ) : (
        <p>No article data found</p>
      )}
    </div>
  );
};
export default Newscontent;

内容的提问来源于stack exchange，提问作者androidpol