单击图像应路由到组件

Question

背景

我在实施反应路线时遇到问题

大家好。请原谅，这是我第一次来这里，我已经在 Codecademy 上发表了一篇关于此的文章。我将继续复制并粘贴我在 Codecademy 上创建的线程，因为我认为我在那里很好地总结了问题：

大家好。我正在做前端工程师课程大纲中的一个开放式项目，涉及从头开始创建自己的 React 应用程序并将其发布到 github 和 netlify。我喜欢这些开放式项目，因为它们允许很大的创作自由。不管怎样，我现在非常接近创建我的第一个网站了。它被称为电子游戏博物馆。这只是我最喜欢的前 10 名视频游戏的简单列表，每个视频游戏都有自己的页面，其中有一些迷你评论以及一些关于如果人们想尝试的话在哪里购买游戏的信息。

我在从事该项目的同时也一直在继续我的学习，并了解了 React Router 及其所有各种组件。不管怎样，我现在遇到了一个问题，我已经导入了所有单独的页面（每个页面都以相应的视频游戏命名，文件扩展名为 .js），并用

<BrowserRouter> ...</BrowserRouter>

包装了主应用程序 return () 部分

其预期功能是使各种视频游戏的照片可点击，并让它们带您到我为每个视频游戏编写的页面（所有这些都有自己的 JS 函数，我将其导入到 App.js 中）。

我希望我已经说得足够清楚了。如果您需要我进一步解释，请告诉我。

问题

所以我想让每个游戏图像都可点击，并让点击将我发送到每个游戏各自的 .js 函数，但现在它们还不能。我不确定为什么这些链接没有呈现预期的功能。

我已将所有必要的 React 函数导入到 App.js、index.js 以及我创建的每个游戏页面的 .js 文件中。我感觉已经接近获得过去一周左右我一直试图达到的预期结果，但需要更多指导。

代码如下：

 /*Free Javascript Code for the VideoGame Museum Project
    Copyright (C) 2024  Elias L. Turner

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter, BrowserRouter, createRoutesFromElements, Route, Outlet, Link, NavLink } from 'react-router-dom'
import PN03 from './PN03'
import Minetest from './Minetest'
import RedOrchestra from './RedOrchestra'
import EuroTruckSim2 from './EuroTruckSim2'
import RallyChallenge2000 from './RallyChallenge2000'
import MirrorsEdge from './MirrorsEdge'
import MidwayArcadeTreasures3 from './MidwayArcadeTreasures3'
import JetSetRadio from './JetSetRadio'
import GauntletDarkLegacy from './GauntletDarkLegacy'
import Openarena from './Openarena'
import logo from './videogame museum website project logo.png';
import './App.css';
import pn03 from './pn03 gamecube box art front.jpg'
import openarena from './open arena screenshot.jpg'
import minetest from './minetest logo.jpg'
import redorchestra from './red orchestra ostfront.jpeg'
import rallychallenge2000 from './Rally Challenge 2000 box art.jpg'
import mirrorsedge from './Mirror_s_Edge box art.jpg'
import jetsetradio from './Jet Set Radio Dreamcast front cover.jpg'
import eurotrucksim2 from './Euro Truck Simulator 2 cover.jpg'
import midwayarcadetreasures from './Midway Arcade Treasures 3 box art front.jpg'
import gauntletdarklegacy from './gauntlet dark legacy front box art.jpg'



const appRouter = createBrowserRouter(createRoutesFromElements(<Route path="/" element={ <MainContent/> }>
                                   <Route path="PN03" element={ <PN03/> } />
                                   <Route path="Minetest" element={ <Minetest/> } />
                                   <Route path="RedOrchestra" element={ <RedOrchestra/> } />
                                   <Route path="EuroTruckSim2" element={ <EuroTruckSim2/> } />
                                   <Route path="RallyChallenge2000" element={ <RallyChallenge2000/> } />

                                   <Route path="MirrorsEdge" element={ <MirrorsEdge/> } />
                                   <Route path="MidwayArcadeTreasures3" element={ <MidwayArcadeTreasures3/> } />
                                   <Route path="JetSetRadio" element={ <JetSetRadio/> } />
                                   <Route path="GauntletDarkLegacy" element={ <GauntletDarkLegacy/> } />
                                   <Route path="Openarena" element={ <Openarena/> } />
                              
                                   </Route>
                                  ));



function MainContent() {

    
    const navigation = (<div><img src={logo} height="200" /><nav>Welcome to The Video Game Museum, a list of my own personal hall of fame of video games</nav>
            <span><a href="">Home </a> <a href="catalog.html">Catalog </a><a href="aboutme.html"> About Me</a></span> </div>)
    const sidebar = (<h5>This is the content for the RSS feed</h5>)
    const footer = (<footer>The content of this website is property of its respective owners. No copyright infringement intended.</footer>)
    const images = {
    border: "2px solid lightblue",
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    padding: "10px 10px 10px 10px",
    height: "650px",
    position: "relative",
    }
    
    

    return (
    <BrowserRouter>
<div className="MainContent">
        <div className="Navigation">{navigation}</div>
        <h1>Welcome to Elias L. Turner's VideoGame Museum</h1>
        <p>
         My name is Elias, and I have been a gamer since I was 5 years old.
<br /><br />
My first video game console was the Nintendo Game Boy Color. It was a see through purple system and the first couple of games I got with the system included Kirby Tilt n Tumble, Megaman Xtreme, and Formula 1. It really helped me pass the time in my childhood, considering that I was homeschooled and had a lot of free time on my hands despite my parents' best efforts.
        <br />
        <br />

    I made this website as a tribute to some of my favorite games that I\'ve played in my 28 years on this bizarre planet. You will notice that most of the games are not super new or high-tech--This is because I don\'t place undue emphasis on graphics and gimmicks unlike a lot of modern gamers. I also don\'t have much time to play modern games these days considering that I work two jobs, so I can\'t comment on some of the great games that I\'m sure have been released recently. All I know is that this list of games are some that were the most influential to me in my upbringing (being babysat by my video game consoles).

Below is a list of my top 10 favorite videogames of all time. I hope you enjoy checking out this top 10 countdown. <br /> <br /> Thank you and have a lovely day.
        </p>
        <div id="sidebar">{sidebar}</div>
<div id="Images" style={images}>
    <Link to={PN03}><img src={pn03} height="200" border="2px 2px solid lightblue"/>{PN03}</Link>
<Link to={Openarena}><img src={openarena} height="150" border="2px 2px solid lightblue" />{Openarena}</Link>
<Link to={Minetest}><img src={minetest} height="150" border="2px 2px solid lightblue" />{Minetest}</Link>
<Link to={RedOrchestra}><img src={redorchestra} height="200" border="2px 2px solid lightblue"/>{RedOrchestra}</Link>
<Link to={RallyChallenge2000}><img src={rallychallenge2000} height="175" border="2px 2px solid lightblue" />{RallyChallenge2000}</Link>
<Link to={MirrorsEdge}><img src={mirrorsedge} height="200" border="2px 2px solid lightblue" />{MirrorsEdge}</Link>
<Link to={JetSetRadio}><img src={jetsetradio} height="200" border="2px 2px solid lightblue"/>{JetSetRadio}</Link>
<Link to={EuroTruckSim2}><img src={eurotrucksim2} height="150" border="2px 2px solid lightblue"/>{EuroTruckSim2}</Link>
<Link to={MidwayArcadeTreasures3}><img src={midwayarcadetreasures} height="200" border="2px 2px solid lightblue" />{MidwayArcadeTreasures3}</Link>
<Link to={GauntletDarkLegacy}><img src={gauntletdarklegacy} height="200" border="2px 2px solid lightblue" />{GauntletDarkLegacy}</Link> </div>
       
        <footer>{footer}</footer>
 <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn ReactJS
        </a>
    </div>
    </BrowserRouter>

  );
    

}

export default MainContent;

这是我的网站的照片（从主页顶部）。它仍然需要一些收尾工作，但我希望这些图像加载它们自己的 js 函数，当我单击它们时，我将这些函数导入到 app.js 文件中（照片附在我的帖子中）

Answer 1

您正在将组件传递给 Link 中的“to”。它接受字符串值。你可以像下面这样尝试一下吗

<Link to={'/GauntletDarkLegacy'}><img src={gauntletdarklegacy} height="200" border="2px 2px solid lightblue" />{GauntletDarkLegacy}</Link> </div>

`