React路由问题：点击产品图片无法跳转新页面，组件叠加显示

问题原因 #

你当前的代码中，Home、About、Machines、Contact组件直接挂载在BrowserRouter下，无论当前路由是什么，这些组件都会始终渲染。而Routes中定义的/product1路由对应的Product1组件会追加在这些组件之后，导致点击链接后，Product1出现在Contact模块下方，而非独立页面。

修复步骤 #

1. 整合首页模块为单独组件 #

创建一个HomePage组件，将首页的四个模块整合进去：

// components/HomePage.js
import React from 'react';
import Home from './Home';
import About from './About';
import Machines from './Machines';
import Contact from './Contact';

const HomePage = () => {
  return (
    <>
      <Home />
      <About />
      <Machines />
      <Contact />
    </>
  );
};

export default HomePage;

2. 重构App.js的路由结构 #

将首页模块和产品页都纳入Routes管理，确保路由切换时替换页面内容：

import React from 'react'
import {BrowserRouter , Routes, Route} from "react-router-dom";
import Navbar from './components/Navbar'
import HomePage from './components/HomePage'
import Product1 from './components/Product1'

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        {/* 首页路由，渲染整合后的HomePage */}
        <Route path="/" element={<HomePage />} />
        {/* 产品详情页路由 */}
        <Route path="/product1" element={<Product1 />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

3. 确认Link组件导入正确 #

确保Machines.js中正确导入react-router-dom的Link组件：

// Machines.js
import { Link } from 'react-router-dom';

<figure>
  <Link to="/product1"><img src={image1} alt="Image 1" /></Link>
  <figcaption>
    <p>Manual Cocker Machine</p>
   </figcaption>
</figure>

完成以上修改后，点击产品图片时，路由会切换到/product1，页面将只渲染Product1组件，实现独立页面的跳转效果。

内容的提问来源于stack exchange，提问作者user23553395