使用React Router的Link传state时，useLocation获取state为null的问题

问题1：Link组件的state传递方式错误 #

在React Router v6中，state需要作为to对象的属性传递，而非单独的组件props。你的代码把state写成了Link的独立props，导致数据无法正确传递。

修复ContactCard.jsx中的Link：

<Link
  to={{ 
    pathname: `/ContactDetails/${id}`,
    state: props.contact // 将state放入to对象中
  }}
  style={{ cursor: "pointer" }}
>

问题2：ContactDetails中对location.state的解构错误 #

你传递的state本身就是props.contact对象（包含id、name、email），但你试图解构contact属性，这会导致获取不到数据。

修复ContactDetails.jsx：

const ContactDetails = () => {
  const location = useLocation();
  // 直接取location.state，它就是你传递的contact对象
  const contact = location.state || null;

  if (!contact) {
    return <div>No contact data available.</div>;
  }

  console.log(contact);

  return (
    <>
      <div>
        <div>{contact.name}</div>
        <div>{contact.email}</div>
      </div>
      <div className='ul'></div>
    </>
  );
};

额外检查点 #

• 确认路由配置正确，ContactDetails的路由需匹配动态路径：

  // 路由配置示例
  import { Routes, Route } from 'react-router-dom';
  import ContactDetails from './ContactDetails';
  
  <Routes>
    <Route path="/ContactDetails/:id" element={<ContactDetails />} />
    {/* 其他路由 */}
  </Routes>
  

• 注意：location.state存储在内存中，刷新页面后会丢失。如果需要持久化数据，建议通过URL参数传递id，再从数据源（如状态管理工具或API）中获取完整的contact数据。

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