创建React App -路由更改图像路径

npm install react-router-dom

my-app/
  ├── public/
  ├── src/
  │   ├── components/
  │   │   ├── Home.js
  │   │   ├── About.js
  │   │   └── ImageComponent.js
  │   ├── App.js
  │   ├── index.js
  └── package.json

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import ImageComponent from './components/ImageComponent';

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/image/:imageName" component={ImageComponent} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

// src/components/Home.js
import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/image/homeImage">Go to Home Image</Link>
    </div>
  );
}

export default Home;

// src/components/About.js
import React from 'react';
import { Link } from 'react-router-dom';

function About() {
  return (
    <div>
      <h1>About Page</h1>
      <Link to="/image/aboutImage">Go to About Image</Link>
    </div>
  );
}

export default About;

// src/components/ImageComponent.js
import React from 'react';
import { useParams } from 'react-router-dom';

function ImageComponent() {
  const { imageName } = useParams();

  // 动态导入图像
  const imagePath = require(`../assets/${imageName}.jpg`).default;

  return (
    <div>
      <h1>Image Page</h1>
      <img src={imagePath} alt={imageName} />
    </div>
  );
}

export default ImageComponent;

npm start