react-router-dom 6.7.0跳转问题：点击Link仅显示Navbar，页面内容不加载

搭建第一个网站时使用react-router-dom 6.7.0遇到以下问题：已在App.jsx中配置Routes，Navbar组件添加了Link；点击Navbar的「Services」链接，地址栏成功跳转到/services，但页面仅显示Navbar，对应的Services页面内容无法加载。改用NavLink后问题依旧。

相关代码 #

App.jsx #

import React from 'react';
import "./App.css";
import { BrowserRouter, Routes,Route } from "react-router-dom";
import Home from './pages/home/Home';
import Samples from './pages/samples/Samples';
import Services from './pages/services/Services';
import Navbar from './components/navbar/Navbar';
import Reviews from './components/reviews/Reviews';
import Contacts from './components/contacts/Contacts';

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/services" element={<Services />} />
          <Route path="/samples" element={<Samples />} />
          {/* <Route path="#reviews" element={<Reviews />} /> */}
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

Navbar组件（片段） #

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { RiMenuFill, RiCloseLine } from 'react-icons/ri';
import './navbar.css';
import MainLogo from "../../assets/MainLogo.png";

const Navbar = () => {
  const [toggleMenu, setToggleMenu] = useState(false); 

  return (
    <div>
      <div className='navbar'>
        <Link style={{textDecoration:"none"}} to="/">
          <img src={MainLogo} alt="main_logo" className="navbar_logo"/>
        </Link>
        <ul className='navbar_links'>
          <li>
            <Link to="/services">Services</Link>
          </li>
          <li>
            <Link to="/samples">Samples</Link>
          </li>
          <li>
            <Link to="/">Reviews</Link>
          </li>
          <li>
            <Link to="#gallery">Gallery</Link>
          </li>
          <li>
            <Link to="#about">About Us</Link>
          </li>
          <li>
            <Link to="#contacts">Contacts</Link>
          </li>
        </ul>
      </div>

排查建议 #

• 确认Services组件导出方式：检查./pages/services/Services.jsx是否使用默认导出（export default Services），如果是命名导出，需在App.jsx中改为import { Services } from './pages/services/Services';。
• 补全Navbar组件代码：当前提供的Navbar代码未闭合return的JSX结构（缺少</div>和组件闭合标签），DOM结构异常会影响路由组件渲染，需补全代码。
• 检查Services组件内容：确保Services组件内部有可渲染的JSX内容，而非空组件。
• 排查样式冲突：查看App.css或Navbar.css中是否存在隐藏元素的样式（如display: none、visibility: hidden），或者定位层级问题导致路由组件被遮挡。
• 尝试使用Layout路由结构：将Navbar放在布局组件中，通过Outlet渲染路由内容，确保结构更规范：

  // 新建Layout.jsx
  import { Outlet } from 'react-router-dom';
  import Navbar from './components/navbar/Navbar';
  
  const Layout = () => {
    return (
      <>
        <Navbar />
        <Outlet /> {/* 路由内容会在这里渲染 */}
      </>
    );
  };
  
  // 修改App.jsx中的路由配置
  <BrowserRouter>
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<Home />} />
        <Route path="/services" element={<Services />} />
        <Route path="/samples" element={<Samples />} />
      </Route>
    </Routes>
  </BrowserRouter>
  

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