1) 在反应路由器中
<Route path={"/movie/:id"} component={ResultPage} />
2) 搜索组件
当我搜索电影时,它会点击 API 并显示一个Result
组件。每个结果Link
都指向一条动态路线(上图)。
<div className="results">
{data.map((movie) => (
<Result
poster_path={movie.poster_path}
alt={movie.title}
key={movie.id}
id={movie.id}
title={movie.title}
overview={movie.overview}
release_date={movie.release_date}
genre_ids={movie.genre_ids}
/>
))}
</div>;
3) 结果组件
我在 中传递了一些道具,Link
并用于props.location.state
获取该ResultPage
组件的其余电影数据。
export default function Result(props) {
const { poster_path: poster, alt, title } = props;
return (
<div className="result">
<Link
to={{
pathname: `/movie/${title}`,
state: { ...props },
}}
>
<img
src={
poster
? `https://image.tmdb.org/t/p/original/${poster}`
: "https://www.genius100visions.com/wp-content/uploads/2017/09/placeholder-vertical.jpg"
}
alt={alt}
/>
</Link>
</div>
);
}