React Router中如何使用navigate函数传递参数？多次尝试均失败

你当前的问题是navigate函数的用法错误，第二个参数不能直接传数据，它需要是一个配置对象。以下是两种可行的传参方案：

方案一：通过state传递（不暴露在URL中） #

修改导航代码： #

const navigate = useNavigate();
const lessonslist = [{ name: "lesson1", id: "11" }];
// 把数据放在state字段里
navigate('/Lessons', { state: { lessonsList: lessonslist } });

在LessonsList组件中接收参数： #

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

function LessonsList() {
  const location = useLocation();
  // 用可选链避免无参数时报错，默认值设为空数组
  const lessonsList = location.state?.lessonsList || [];
  // 后续业务逻辑
}

方案二：通过URL查询参数传递（暴露在URL中） #

适合需要分享链接或保留参数在URL的场景，数组需要先序列化：

修改导航代码： #

const navigate = useNavigate();
const lessonslist = [{ name: "lesson1", id: "11" }];
// 把数组转成JSON字符串并编码，避免URL乱码
const lessonsStr = encodeURIComponent(JSON.stringify(lessonslist));
navigate(`/Lessons?lessonsList=${lessonsStr}`);

在LessonsList组件中接收参数： #

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

function LessonsList() {
  const [searchParams] = useSearchParams();
  const lessonsListStr = searchParams.get('lessonsList');
  // 解码并解析回数组，无参数时用空数组兜底
  const lessonsList = lessonsListStr ? JSON.parse(decodeURIComponent(lessonsListStr)) : [];
  // 后续业务逻辑
}

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