使用React Router V6时页面空白？请帮忙排查问题原因

问题描述 #

我正在尝试使用React Router V6，但配置以下路由后，页面仅显示空白。请问可能是什么问题？

相关代码 #

App.js

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './components/home';

function App() {
  return <BrowserRouter>
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/hi' element={<div>hi</div>} />
      <Route path='/bye' element={<div>bye</div>} />
    </Routes>
  </BrowserRouter>
}

export default App;

Home.jsx

import React from "react";

export default function Home(){
    return <h1>Home</h1>
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <App />, document.getElementById('root'))

可能的问题及解决方案 #

• React版本不兼容：React Router V6要求React版本≥16.8.0（支持Hooks），版本过低会导致组件无法正常渲染。
  解决：查看package.json中的react版本，若低于要求，执行以下命令升级：

  npm install react@latest react-dom@latest
  

• 文件路径大小写不匹配：在App.js中导入Home时用了./components/home，但实际文件是Home.jsx，Linux/macOS系统区分文件名大小写，路径错误会导致组件加载失败。
  解决：修正导入路径为：

  import Home from './components/Home';
  

• React 18下渲染方式过时：如果使用React 18，ReactDOM.render已被废弃，继续使用会导致渲染异常。
  解决：修改index.js为React 18的渲染方式：

  import React from "react";
  import ReactDOM from "react-dom/client";
  import App from "./App";
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
  

• 依赖未正确安装：可能react-router-dom未正确安装或版本不对。
  解决：删除旧依赖文件后重新安装：

  rm -rf node_modules package-lock.json
  npm install react-router-dom@6
  

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