React Router实现独立页面渲染失败问题求助

问题原因 #

你的App.js中，<Header>、<Services>、<Work>等所有组件都直接挂载在<BrowserRouter>下，无论当前路由是什么，这些组件都会始终渲染在页面上。当点击访问/about时，<AboutPage>只会被插入到<Routes>的位置（也就是<Header>之后、<Services>之前），所以看起来是夹在主页面组件中间，而非独立页面。

解决方案 #

需要将主页面的所有组件封装成一个独立的首页组件，通过路由来控制首页和About页面的切换，确保只有当前路由匹配的组件才会渲染。

步骤1：创建首页组件（HomePage） #

新建components/HomePage/HomePage.jsx文件，将原来主页面的组件移入其中：

import Services from '../Services/Services';
import Work from '../Work/Work';
import WorkProcess from '../WorkProcess/WorkProcess';
import Newsletter from '../Newsletter/Newsletter';
import About from '../About/About';
import Testimonials from '../Testimonials/Testimonials';
import Contact from '../Contact/Contact';

const HomePage = () => {
  return (
    <>
      <Services />
      <Work />
      <WorkProcess />
      <Newsletter />
      <About />
      <Testimonials />
      <Contact />
    </>
  );
};

export default HomePage;

步骤2：修改App.js的路由配置 #

更新App.js，用<Routes>管理所有页面路由，只保留全局需要的组件（比如Header、Footer）：

// css
import './App.css';

// script
import './assets/js/script';

// components
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import AboutPage from './components/AboutPage/AboutPage';
import HomePage from './components/HomePage/HomePage'; // 引入首页组件

// routes
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Routes>
          <Route path="/" element={<HomePage />} /> {/* 首页路由 */}
          <Route path="/about" element={<AboutPage />} /> {/* About独立页面路由 */}
        </Routes>
        <Footer /> {/* 如需全局显示Footer则保留，否则移到HomePage中 */}
      </BrowserRouter>
    </div>
  );
}

export default App;

步骤3：修正Navbar中的路由链接问题 #

注意到你的Navbar里，Services链接的to="/services"是路由路径，但原来的逻辑是跳转到首页的锚点，这里需要调整为锚点链接避免错误跳转：

// 将Navbar中的Services链接修改为：
<Link to="/#services" className='nav-link text-white ls-1 text-uppercase fw-6 fs-22' onClick={() => scrollToSection('services')}>Services</Link>

效果说明 #

修改完成后：

• 访问/时，会渲染Header + HomePage（包含原主页面所有组件） + Footer
• 访问/about时，会渲染Header + AboutPage + Footer，实现About页面独立显示的需求

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