react-router-dom v6.4路由结构下组件无法渲染问题求助

问题重现 #

直接渲染Home组件时页面正常显示，但将其放入React Router的路由结构后，Home组件无法加载：

正常渲染的代码（App.jsx） #

import './App.css';
import Home from './pages/Home.jsx'

function App() {
  return (
    <Home />
  );
}

export default App;

路由结构下无法加载的代码（App.jsx） #

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home.jsx'

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

Home组件和入口文件index.js代码如下：

// Home.jsx
function Home() {
    return (
      <div style={{ padding: 20 }}>
        <h2>Home View</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adip.</p>
      </div>
    );
  }

export default Home;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

排查与解决步骤 #

1. 确认react-router-dom版本是否匹配 #

你当前的路由写法是React Router v6的语法（使用Routes组件，Route的element属性），如果项目安装的是v5及以下版本，会出现不兼容问题。

• 查看当前版本：

  npm list react-router-dom
  # yarn 用户执行
  yarn list react-router-dom
  

• 版本低于v6时，升级到最新版：

  npm install react-router-dom@latest
  # yarn 用户执行
  yarn add react-router-dom@latest
  

• 若不想升级，改用v5语法（替换Routes为Switch，element改为component）：

  import './App.css';
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
  import Home from './pages/Home.jsx'
  
  function App() {
    return (
      <Router>
        <Switch>
          <Route path="/" component={Home} />
        </Switch>
      </Router>
    );
  }
  
  export default App;
  

2. 检查组件导入路径 #

确认./pages/Home.jsx文件真实存在，且文件名大小写与导入语句完全匹配（Linux/macOS系统区分文件名大小写，Windows不区分）。

3. 清除缓存并重启开发服务器 #

开发服务器的缓存可能导致路由配置未生效，关闭当前服务器后重新启动：

npm start
# yarn 用户执行
yarn start

4. 检查基础路径配置 #

如果项目部署在子路径下，需在public/index.html中设置base标签：

<base href="/" />

确保href值与项目根路径一致。

5. 查看浏览器控制台报错 #

打开浏览器开发者工具（F12），切换到Console标签，查看是否有模块找不到、路由初始化失败等错误信息，根据报错定位具体问题。

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