本文介绍在 react router v6 + react 18 环境下，如何将路由配置中传递的 prop（如 `listmovies`）安全、高效地注入组件逻辑，实现复用型列表组件（如电影列表）根据不同路径自动切换数据源。
在构建单页应用（SPA）时，组件复用是提升开发效率与代码可维护性的关键。以电影列表组件 Movielist 为例，我们希望它既能展示 / 路由下的「正在上映」影片（now_playing），也能展示 /top-rated 下的「高分榜单」（top_rated），而无需创建两个几乎相同的组件。
实现这一目标的核心思路是：通过路由 <Route> 的 element 属性向组件传递 props，并在组件内解构使用该 prop 控制 API 请求路径。你已在 App.js 中正确完成了第一步：
<Route path="/" element={<Movielist listMovies="now_playing" />} />
<Route path="/top-rated" element={<Movielist listMovies="top_rated" />} />接下来，在 Movielist.jsx 中需做三处关键调整：
Auth0 React Native
下载
用于在React Native或Expo移动应用（iOS/Android）中添加生物识别认证——集成react-native-auth0 SDK与原生深度...
- 接收并解构 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) => (
<Moviecard key={movie.id} movie={movie} />
));
};
// ✅ 正确依赖：当 listMovies 变化时（即路由切换），重新请求数据
useEffect(() => {
getMovies();
}, [listMovies]); // ← 关键：不再依赖 useLocation()
// 动态标题优化（可选增强体验）
const getPageTitle = () => {
switch (listMovies) {
case 'now_playing': return '正在上映';
case 'top_rated': return '高分榜单';
default: return '电影列表';
}
};
return (
<>
<h1 className="page-title">{getPageTitle()}</h1>
<div className="row list">
{displayMovies()}
</div>
</>
);
}
export default Movielist;⚠️ 注意事项：
- 不要引入 useLocation() 作为 useEffect 依赖——它不仅增加不必要的重渲染开销，还可能因 location 对象引用变化导致意外重复请求；
- 始终对 axios 请求添加 try/catch，避免未处理异常导致组件崩溃；
- 若未来需支持更多列表类型（如 upcoming, popular），只需新增路由配置并复用同一 Movielist 组件，真正实现“一处定义，多处运行”。
通过以上改造，Movielist 成为一个完全受控于路由上下文的纯函数组件，职责清晰、可测试性强，完美契合 React 18 的设计理念与现代路由实践。
