React使用navigate()跳转页面时如何正确传递props？

你当前的问题出在navigate函数的参数传递方式上，直接传入{ card }是无效的，必须把数据放到state字段里。

1. 修正跳转代码 #

把要传递的card数据嵌套在state对象中：

{
  notes.map((card) => (
    <div key={card.id} onClick={() => navigate("/EditNotes", { state: { card } })}>
      <NoteCard title={card.NoteTitle} bgColor={card.CardColor} />
    </div>
  ));
}

2. 在目标组件接收参数 #

在EditNotes组件中，需要使用useLocation钩子来获取路由携带的state数据，而不是直接通过组件props接收：

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

const EditNotes = () => {
  const location = useLocation();
  // 加|| {}是为了避免页面刷新或state为空时解构报错
  const { card } = location.state || {};
  console.log(card);
  // 后续业务逻辑...
}

额外注意：持久化参数的方案 #

如果需要页面刷新后参数依然存在，建议通过URL参数传递卡片ID，再根据ID重新获取数据：

跳转代码修改：

{
  notes.map((card) => (
    <div key={card.id} onClick={() => navigate(`/EditNotes/${card.id}`)}>
      <NoteCard title={card.NoteTitle} bgColor={card.CardColor} />
    </div>
  ));
}

路由配置修改：

// 假设你的路由是用BrowserRouter包裹的
<Route path="/EditNotes/:id" element={<EditNotes />} />

目标组件获取ID并查询数据：

import { useParams } from 'react-router-dom';

const EditNotes = () => {
  const { id } = useParams();
  // 从数据源（比如notes数组或后端接口）获取对应ID的卡片数据
  const card = notes.find(item => item.id === id);
  console.log(card);
  // 后续业务逻辑...
}

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