在我的主页上，我有15张电影卡。若我点击了任何特定的卡片，它应该会在新页面中显示相应的电影详细信息。我没有使用任何IMDB API来实现这一点。只是试图从JSON文件中获取电影的详细信息。
/TVShows/index.js:
const TvShows = () => {
return (
<div className="tv-shows">
<div className="movies-poster">
<h3>TV Shows</h3>
<ul>
<li><img src={TvShows1} alt={TvShows1} /></li>
<li><img src={TvShows2} alt={TvShows2} /></li>
<li><img src={TvShows3} alt={TvShows3} /></li>
<li><img src={TvShows4} alt={TvShows4} /></li>
<li><img src={TvShows5} alt={TvShows5} /></li>
</ul>
</div>
</div>
);
}
电影详情。Json：
{
"Sheet1": [
{
"Id": "1",
"Title": "No Time to Die",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt2382320/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=88C6G5X1N3H7EX2KWG46&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_1",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/no_time_to_die_2021",
"Plot/Storyline-IMDB": "Bond has left active service and is enjoying a tranquil life in Jamaica. His peace is short-lived when his old friend Felix Leiter from the CIA turns up asking for help. The mission to rescue a kidnapped scientist turns out to be far more treacherous than expected, leading Bond onto the trail of a mysterious villain armed with dangerous new technology.—Universal Pictures",
"Summary-imdb": "James Bond has left active service. His peace is short-lived when Felix Leiter, an old friend from the CIA, turns up asking for help, leading Bond onto the trail of a mysterious villain armed with dangerous new technology.",
"Summary-RT": "In No Time To Die, Bond has left active service and is enjoying a tranquil life in Jamaica. His peace is short-lived when his old friend Felix Leiter from the CIA turns up asking for help. The mission to rescue a kidnapped scientist turns out to be far more treacherous than expected, leading Bond onto the trail of a mysterious villain armed with dangerous new technology.",
"Tag_line_IMDB": "Bond is BackrnThis April the 25th film will change everything [trailer]rnThe mission that changes everything begins.",
"Genre-IMDB": "Action, Adventure, Thriller",
"Genre-RT": "Action, Mystery & Thriller, Adventure",
"Plot-keywords-IMDB": "https://docs.google.com/spreadsheets/d/1oEg3zx-G_-ficrJYh16M6qPOHpmtVl-BpF2WWeGH6ho/edit#gid=0"
},
{
"Id": "2",
"Title": "Dune",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt1160419/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=323BCNV2FR6MA1KDPJX8&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_2",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/dune_2021",
"Plot/Storyline-IMDB": "A mythic and emotionally charged hero's journey, "Dune" tells the story of Paul Atreides, a brilliant and gifted young man born into a great destiny beyond his understanding, must travel to the most dangerous planet in the universe to ensure the future of his family and his people. As malevolent forces explode into conflict over the planet's exclusive supply of the most precious resource in existence-a commodity capable of unlocking humanity's greatest potential-only those who can conquer their fear will survive.—Warner Bros.",
"Summary-imdb": "Feature adaptation of Frank Herbert's science fiction novel, about the son of a noble family entrusted with the protection of the most valuable asset and most vital element in the galaxy.",
"Summary-RT": "Paul Atreides, a brilliant and gifted young man born into a great destiny beyond his understanding, must travel to the most dangerous planet in the universe to ensure the future of his family and his people. As malevolent forces explode into conflict over the planet's exclusive supply of the most precious resource in existence, only those who can conquer their own fear will survive.",
"Tag_line_IMDB": "Beyond fear, destiny awaits.",
"Genre-IMDB": "Action, Adventure, Drama, Sci-Fi",
"Genre-RT": "Sci-Fi, Adventure"
},
{
"Id": "3",
"Title": "Free Guy",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt6264654/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=AASC0WBMSY9ZMMPGXW13&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_3",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/free_guy",
"Plot/Storyline-IMDB": "A bank teller discovers that he's actually an NPC inside a brutal, open world video game.",
"Summary-imdb": "A bank teller discovers that he's actually an NPC inside a brutal, open world video game.",
"Summary-RT": "In "Free Guy," a bank teller who discovers he is actually a background player in an open-world video game, decides to become the hero of his own story... one he rewrites himself. Now in a world where there are no limits, he is determined to be the guy who saves his world his way... before it is too late.",
"Tag_line_IMDB": "The world needed a hero.They got a guy.Life's too short to be a background character.Big movie. Big screen. (IMAX release poster)",
"Genre-IMDB": "Action, Adventure, Comedy, Fantasy, Sci-Fi",
"Genre-RT": "Adventure, Comedy, Action"
},
{
"Id": "4",
"Title": "The Many Saints of Newark",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt8110232/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=A2648BX225X5FX5CPXCF&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_4",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/the_many_saints_of_newark",
"Plot/Storyline-IMDB": "Young Anthony Soprano is growing up in one of the most tumultuous eras in Newark's history, becoming a man just as rival gangsters begin to rise up and challenge the all-powerful DiMeo crime family's hold over the increasingly race-torn city. Caught up in the changing times is the uncle he idolizes, Dickie Moltisanti, who struggles to manage both his professional and personal responsibilities and whose influence over his nephew will help make the impressionable teenager into the all-powerful mob boss we'll later come to know: Tony Soprano.",
"Summary-imdb": "Witness the making of Tony Soprano. The story that reveals the humanity behind Tony's struggles and the influence his family - especially his uncle, Dickie Moltisanti - had over him becoming the most iconic mob boss of all time.",
"Summary-RT": "Young Anthony Soprano is growing up in one of the most tumultuous eras in Newark's history, becoming a man just as rival gangsters begin to rise up and challenge the all-powerful DiMeo crime family's hold over the increasingly race-torn city. Caught up in the changing times is the uncle he idolizes, Dickie Moltisanti, who struggles to manage both his professional and personal responsibilities--and whose influence over his impressionable nephew will help make the teenager into the all-powerful mob boss we'll later come to know: Tony Soprano.",
"Tag_line_IMDB": "A Sopranos Story Who Made Tony Soprano",
"Genre-IMDB": "Crime, Drama",
"Genre-RT": "Drama, Crime"
},
{
"Id": "5",
"Title": "Venom: Let There Be Carnage",
"Year": "2021",
"IMDB": "https://www.imdb.com/title/tt7097896/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=ea4e08e1-c8a3-47b5-ac3a-75026647c16e&pf_rd_r=A2648BX225X5FX5CPXCF&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=moviemeter&ref_=chtmvm_tt_5",
"Rotten-Tomatoes": "https://www.rottentomatoes.com/m/venom_let_there_be_carnage",
"Plot/Storyline-IMDB": "Eddie Brock struggles to adjust to his new life as the host of the alien symbiote Venom, which grants him super-human abilities in order to be a lethal vigilante. Brock attempts to reignite his career by interviewing serial killer Cletus Kasady, who becomes the host of the symbiote Carnage and escapes prison after a failed execution",
"Summary-imdb": "Eddie Brock attempts to reignite his career by interviewing serial killer Cletus Kasady, who becomes the host of the symbiote Carnage and escapes prison after a failed execution.",
"Summary-RT": "Eddie Brock is still struggling to coexist with the shape-shifting extraterrestrial Venom. When deranged serial killer Cletus Kasady also becomes host to an alien symbiote, Brock and Venom must put aside their differences to stop his reign of terror.",
"Genre-IMDB": "Action, Adventure, Sci-Fi, Thriller",
"Genre-RT": "Sci-Fi, Adventure, Action, Comedy, Fantasy"
}
]}
/MovieDetail/index.js:
const PageMovieList = ({ movieName, movieStory, duration, genres, year, certification, audioLanguage, subtitles }) => {
return (
<div className='page-movie-list-bg'>
<div className='page-movie-list'>
<h3>{movieName}</h3>
<p>{movieStory}</p>
<div>Duration: {duration}</div>
<div>Genres: {genres}</div>
<div>Year: {year}</div>
<div>Certification: {certification}</div>
<div>Audio Languages: {audioLanguage}</div>
<div>Subtitles: {subtitles}</div>
<div className='play-add-btns'>
<span><FontAwesomeIcon icon={faPlay} /></span>
<span><FontAwesomeIcon icon={faPlus} /></span>
</div>
</div>
</div>
)
}
我建议您阅读有关react router dom useParams的信息这是文档的链接
https://reactrouter.com/docs/en/v6/getting-started/overview
有了这个，你就可以通过电影的id进行检测，它会把你带到一个带有信息的新屏幕