React Router路由仅渲染首个组件 切换路径后组件不渲染求解

这个问题是react-router-dom 版本与代码语法不匹配导致的，和组件本身、路由书写顺序无关，按你实际使用的版本对应修正即可：

方案1：使用 React Router v6（官方推荐稳定版） #

你现有写法是v6的标准语法，出问题基本是本地安装的版本低于6.x导致的，按以下步骤修复：

1. 先执行命令验证本地安装版本：

npm list react-router-dom

2. 如果输出的版本号低于6.0.0，执行升级命令：

npm install react-router-dom@6

3. 修正代码里的冗余属性：v6默认是精确路径匹配，根路由上的exact是v5遗留的无效属性，删掉即可，修正后代码如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import { PdfPage } from './PdfPage';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';


const routing = (  
    <Router>  
      <Routes>  
        <Route path="/" element={<App />} />
        <Route path="/pdfPage" element={<PdfPage />} /> 
      </Routes>
    </Router> 
);

// React18用createRoot渲染，React17可保留原ReactDOM.render写法
ReactDOM.createRoot(document.getElementById('root')).render(routing);

4. 额外检查：如果你用的是自建webpack/vite配置，记得开启history模式的路由回退规则，保证所有路径请求都返回index.html，否则子路由刷新会直接404。

方案2：保留 React Router v5 版本 #

如果项目依赖暂时不能升级到v6，就把代码改成v5兼容的写法：v5没有Routes组件，也不支持element属性传参，需要用Switch组件实现「匹配到第一个符合规则的路由就停止匹配」的逻辑，用component属性绑定渲染组件，修正后代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { App} from './App';
import { PdfPage } from './PdfPage';
// v5 导入Switch而非Routes
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';


const routing = (  
    <Router>  
      <Switch>
        {/* v5 根路径必须加exact做精确匹配，否则会按前缀匹配所有子路径 */}
        <Route exact path="/" component={App} />
        <Route path="/pdfPage" component={PdfPage} /> 
      </Switch>
    </Router> 
);

ReactDOM.render(routing, document.getElementById('root'));

补充排查点：如果修正版本后问题仍存在，检查App组件内部是否写了全局路由重定向逻辑，强制跳转到根路径，也会导致子路由无法正常渲染。

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