BrowserRouter无法渲染组件：/路由对应Home组件不显示问题

报错信息 #

react-dom.development.js:18970 上述错误发生在 <BrowserRouter> 组件中：

at BrowserRouter (http://localhost:3000/static/js/bundle.js:43555:5)
at div
at App

建议在组件树中添加错误边界来自定义错误处理行为。

代码片段 #

App.js #

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

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

export default App;

Home.js #

import React from 'react'

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

export default Home

问题排查与解决 #

1. 移除多余的exact属性
   react-router-dom v6版本中，<Routes>组件已默认实现精确匹配，<Route>不再支持exact属性，保留该属性会导致路由解析异常。修改App.js中的路由代码：

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

2. 验证组件导入路径
   确认Home组件的导入路径./pages/Home是否正确，检查项目目录中是否存在src/pages/Home.js文件，注意文件名大小写（Linux/macOS系统区分大小写，大小写不匹配会导致导入失败）。

3. 检查react-router-dom版本
   确保安装的是v6版本，若误装v5版本，<Routes>组件不存在会引发错误。可通过以下命令确认版本：

   npm list react-router-dom
   

   版本不符则重新安装v6：

   npm install react-router-dom@latest
   

4. 清理缓存重启项目
   缓存可能导致异常，执行以下命令清理缓存后重启项目：

   npm start -- --reset-cache
   

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