ReactJS如何从子组件向路由页面传递数组对象movie.Title参数

要实现点击电影列表的Watch按钮跳转播放页、传递当前电影Title拼接播放地址的需求，有两种常用实现方式，优先选择动态路由参数方案，可避免页面刷新后参数丢失。

方案1：动态路由参数（推荐） #

• 第一步：调整路由规则
  找到项目中对应/play路径的路由配置，修改为支持携带动态参数的格式：

  <Route path="/play/:movieTitle" element={<Play />} />
  

• 第二步：修改列表组件的跳转逻辑
  替换MovieList组件中Watch按钮的Link代码，注意把JSX里原生的class属性改为React要求的className，同时用encodeURIComponent处理电影名里的特殊字符，避免路径解析错误：

  <li>
    <Link 
      to={`/play/${encodeURIComponent(movie.Title)}`} 
      className="popup-video btn"
    >
      Watch
    </Link>
  </li>
  

• 第三步：在播放页组件接收参数
  React Router v6 提供useParamsHook用于读取路由动态参数，修改Play组件代码如下：

  import React from "react";
  import ReactPlayer from "react-player";
  import { useParams } from "react-router-dom";
  
  function Play(){
      const { movieTitle } = useParams();
      // 解码特殊字符得到真实电影名
      const realTitle = decodeURIComponent(movieTitle);
      return(
          <div>
               <ReactPlayer 
                 width="100%" 
                 height="750px" 
                 controls 
                 url ={`http://www.youtube.com/${realTitle}`} 
               />
          </div>
      );
  }
  
  export default Play;
  

方案2：路由state传参（适合传递多字段复杂数据） #

如果后续需要同时传递电影的海报、年份、类型等多个字段，可以用Link自带的state属性传参，不需要修改路由路径：

• 第一步：修改列表组件Link

  <li>
    <Link 
      to="/play" 
      className="popup-video btn"
      state={{ currentMovie: movie }}
    >
      Watch
    </Link>
  </li>
  

• 第二步：播放页接收state参数
  通过useLocationHook读取传递的state，注意做空值兜底：

  import React from "react";
  import ReactPlayer from "react-player";
  import { useLocation } from "react-router-dom";
  
  function Play(){
      const location = useLocation();
      const movie = location.state?.currentMovie || {};
      return(
          <div>
               <ReactPlayer 
                 width="100%" 
                 height="750px" 
                 controls 
                 url ={`http://www.youtube.com/${movie.Title || ''}`} 
               />
          </div>
      );
  }
  
  export default Play;
  

注意：state传参的缺陷是如果用户直接在地址栏输入/play访问、或者强制刷新页面，传递的state会丢失，必须做好空值兜底逻辑。

原代码问题修正 #

• JSX中不能直接使用HTML原生的class属性，需要替换为className，否则React会抛出属性警告
• 路由匹配渲染的组件不能直接从函数参数里拿到传递的自定义数据，需要通过React Router提供的对应Hook读取参数，原代码中function Play(movie)的写法无法获取到传递的电影数据。

内容的提问来源于stack exchange，提问作者K'man Amuda Jr.