如何在 React 18 中通过路由参数动态设置组件变量值_技术教程

本文介绍在 react router v6 + react 18 环境下，如何将路由配置中传递的 prop（如 `listmovies`）安全、高效地注入组件逻辑，实现复用型列表组件（如电影列表）根据不同路径自动切换数据源。

在构建单页应用（SPA）时，组件复用是提升开发效率与代码可维护性的关键。以电影列表组件 Movielist 为例，我们希望它既能展示 / 路由下的「正在上映」影片（now_playing），也能展示 /top-rated 下的「高分榜单」（top_rated），而无需创建两个几乎相同的组件。

实现这一目标的核心思路是：通过路由的 element 属性向组件传递 props，并在组件内解构使用该 prop 控制 API 请求路径。你已在 App.js 中正确完成了第一步：

} />
} />

接下来，在 Movielist.jsx 中需做三处关键调整：

接收并解构 listMovies prop：修改函数签名，从 function Movielist() 改为 function Movielist({ listMovies })；
移除硬编码变量：删除 let listMovies = 'top_rated'; 这行冗余声明；
优化 useEffect 依赖项：当前示例答案中使用了 location 作为依赖，但实际并不必要——因为 listMovies 是稳定传入的 prop，且其变化会直接触发重新渲染和数据获取。更合理、更轻量的写法是将 listMovies 加入依赖数组，确保路由切换时自动刷新数据：

import { useEffect, useState } from 'react';
import axios from 'axios';
import './Movielist.css';
import Moviecard from '../Moviecard/Moviecard';

function Movielist({ listMovies }) {
  const API_URL = 'https://api.themoviedb.org/3';
  const [movies, setMovies] = useState([]);

  const getMovies = async () => {
    try {
      const { data: { results } } = await axios.get(`${API_URL}/movie/${listMovies}`, {
        params: {
          api_key: process.env.REACT_APP_API_KEY,
        },
      });
      setMovies(results);
    } catch (error) {
      console.error('Failed to fetch movies:', error);
      setMovies([]);
    }
  };

  const displayMovies = () => {
    return movies.map((movie) => (
      
    ));
  };

  // ✅ 正确依赖：当 listMovies 变化时（即路由切换），重新请求数据
  useEffect(() => {
    getMovies();
  }, [listMovies]); // ← 关键：不再依赖 useLocation()

  // 动态标题优化（可选增强体验）
  const getPageTitle = () => {
    switch (listMovies) {
      case 'now_playing': return '正在上映';
      case 'top_rated': return '高分榜单';
      default: return '电影列表';
    }
  };

  return (
    <>
      {getPageTitle()}
      
        {displayMovies()}
      
    
  );
}

export default Movielist;

⚠️ 注意事项：

不要引入 useLocation() 作为 useEffect 依赖——它不仅增加不必要的重渲染开销，还可能因 location 对象引用变化导致意外重复请求；
始终对 axios 请求添加 try/catch，避免未处理异常导致组件崩溃；
若未来需支持更多列表类型（如 upcoming, popular），只需新增路由配置并复用同一 Movielist 组件，真正实现“一处定义，多处运行”。

通过以上改造，Movielist 成为一个完全受控于路由上下文的纯函数组件，职责清晰、可测试性强，完美契合 React 18 的设计理念与现代路由实践。