ReactJS使用react-router-dom配置路由后对应路径组件不显示问题

核心可能原因1：react-router-dom版本不匹配 #

你当前使用的Switch、component属性是react-router-dom v5版本的语法，如果你安装的是v6及以上版本，这些API已经被废弃，会导致路由匹配完全失效，对应组件无法渲染。

排查步骤 #

1. 打开项目根目录下的package.json文件，查看dependencies节点下react-router-dom的版本号
2. 如果版本号为6.x.x，即可确定是版本不匹配问题

解决方法 #

可二选一：

• 降级到v5稳定版：执行命令npm install react-router-dom@5.3.4，重启项目即可
• 适配v6语法修改代码：

// 首先修改Routes.js的导入语句
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from "react-router-dom";

// 组件名改名避免和v6内置Routes组件冲突
export default function RouteConfig() {
    return (
      <Router>
        <div id="page-wrap">
          {/* v6用Routes替换Switch，默认开启精确匹配，不需要加exact属性 */}
          <Routes>
              <Route path='/' element={<Home />}></Route>
              <Route path="/audio" element={<AudioPlayerApp />}></Route>
              <Route path="/video" element={<VideoPlayerApp />}></Route>
              <Route path="/images" element={<ImagesApp />}></Route>
          </Routes>
        </div>
        <SideBarMenu pageWrapId={"page-wrap"} outerContainerId={"app"} />
      </Router>
    );
}

同时修改App.js里的导入和调用，把原来的Routes替换为改名后的RouteConfig即可。

核心可能原因2：react-burger-menu配置错误导致内容被隐藏 #

你给SideBarMenu传递了pageWrapId={"page-wrap"}参数，该参数要求页面主内容必须放在id为page-wrap的容器内，否则react-burger-menu会默认将未标记的主内容隐藏/偏移到可视区域外，导致只能看到侧边栏。

排查步骤 #

1. 打开浏览器开发者工具的元素面板，搜索Home组件内的任意元素（比如Header组件对应的DOM）
2. 如果能找到该元素，但样式显示display: none或者位置偏移到屏幕外，即可确定是该问题

解决方法 #

把所有路由组件包裹在id为page-wrap的div容器中，参考上面v6适配代码的写法即可。同时确认项目根节点的id为app，和SideBarMenu的outerContainerId配置一致。

快速验证方法 #

可以先临时注释掉SideBarMenu组件，重启项目看路由组件是否能正常显示，可快速定位问题是否由侧边栏组件导致。

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