React Router集成问题：仅首页显示，其他路由组件不渲染

问题描述 #

我是React新手，原本通过ID锚点实现导航栏链接对应页面区块聚焦。集成React Router后，仅HomePage组件正常显示，IndvShare、MonthlyCIF等其他路由组件均未渲染；通过console.log排查未发现组件渲染痕迹，但将这些组件移至Footer下方时可正常加载，寻求该路由问题的解决方法。

当前路由代码 #

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/home/navbar";
import HomePage from "./components/home/home";
import IndvShare from "./components/individualShare/indvShare";
import MonthlyCIF from "./components/monthlyCIF/monthlyCIF";
import RepaymentDetails from "./components/repayments/repdets";
import Footer from "./components/home/contactUs";

const appRouter = () => {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/individualShare" element={<IndvShare />} />
        <Route path="/monthlyCIF" element={<MonthlyCIF />} />
        <Route path="/repayment-details" element={<RepaymentDetails />} />
      </Routes>
      <Footer />
    </Router>
  );
};

export default appRouter;

注：React Router v6已移除exact属性，默认路由为精确匹配，代码中exact可删除不影响功能。

相关信息 #

• 运行截图：路由切换后页面无对应组件内容展示
• 文件路径：项目组件目录结构清晰，路由组件路径导入正确
• 路由使用截图：导航栏设置了对应路由的跳转链接
• 未集成React Router的初始项目：原项目通过锚点实现页面内区块跳转

解决步骤 #

1. 替换导航栏的<a>标签为React Router的<Link>组件 #

普通<a>标签会触发页面刷新，导致React Router无法正常管理路由状态，必须使用react-router-dom提供的<Link>组件：

// 在Navbar组件中导入Link
import { Link } from 'react-router-dom';

// 替换原有的<a>标签
<Link to="/individualShare">个人份额</Link>
<Link to="/monthlyCIF">月度CIF</Link>

2. 检查组件导出与导入是否匹配 #

确保路由组件是默认导出，或者导入时使用正确的命名导出：

• 组件文件示例（默认导出）：

// IndvShare.jsx
export default function IndvShare() {
  return <div>个人份额组件</div>;
}

如果是命名导出，需修改导入语句：

import { IndvShare } from "./components/individualShare/indvShare";

3. 排查HomePage组件的样式/布局冲突 #

检查HomePage是否设置了position: fixed、z-index过高、或占据了整个视口空间，导致其他路由组件被遮挡。可以临时注释HomePage的内容，测试其他路由是否能正常渲染：

<Route path="/" element={<div>测试首页占位</div>} />

4. 确认React Router版本兼容性 #

当前代码使用的是React Router v6语法（Routes+element属性），需确保安装的是v6版本：

# 查看当前版本
npm list react-router-dom

# 如果是v5版本，需升级到v6
npm install react-router-dom@latest

若使用v5，需将Routes替换为Switch，element替换为component：

import { Switch, Route } from "react-router-dom";

<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/individualShare" component={IndvShare} />
</Switch>

5. 临时移除Footer测试 #

暂时注释Footer组件，确认其他路由组件是否能正常渲染，排除Footer的样式或结构对路由组件的影响。

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