React-Router-Dom(v6)无法渲染Home组件问题求助

尝试渲染Home组件时页面空白，路径配置正确，Router相关导入无误。该代码在其他项目可正常运行，复制到当前项目后失效。单独渲染Home组件显示正常，添加Router、Routes及Route路由配置后出现空白页面。

相关代码：

App.js #

import React from "react";
import Home from "./components/Home"
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"

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

export default App;

Home.js #

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

index.js #

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

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

reportWebVitals();

预期页面加载时渲染Home组件，实际显示空白页面。

• 检查react-router-dom版本兼容性
  你的代码采用的是react-router-dom v6的写法（使用<Routes>组件、Route的element属性），如果当前项目安装的是v5版本，会直接导致路由无法正常渲染。

  • 执行命令查看当前版本：npm list react-router-dom（npm项目）或yarn list react-router-dom（yarn项目）
  • 若为v5版本，需调整代码为v5适配写法：

    // App.js 修改后
    import React from "react";
    import Home from "./components/Home"
    import {BrowserRouter as Router, Route, Switch} from "react-router-dom"
    
    function App() {
      return (
        <Router>
          <Switch>
            <Route exact path="/" component={Home}/>
          </Switch>
        </Router>
      );
    }
    

  • 若为v6版本，直接移除exact属性即可（v6默认精确匹配，exact属性已被废弃，虽写了不会报错但无意义）：

    <Route path="/" element={<Home/>}/>
    

• 验证根元素存在性
  检查public/index.html文件中是否存在<div id="root"></div>，确保index.js中的document.getElementById('root')能正确获取到DOM节点。

• 查看控制台报错信息
  打开浏览器开发者工具的Console面板，查看是否有路由相关报错（比如导入错误、版本不兼容提示等），这类错误会直接导致组件无法渲染。

• 排查全局样式影响
  检查index.css或其他全局样式文件，确认是否存在body { display: none; }或针对#root元素的隐藏样式，这类设置会导致页面整体空白。

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