React配置react-router-dom时提示'Routes'未定义报错如何解决？

数据老陈

2026-9-24

React路由配置报错解决方案

第一步：确认react-router-dom版本

React Router v6才新增Routes组件替代v5的Switch组件，版本低于v6会出现导入失败的问题：

执行命令查看本地版本：npm list react-router-dom
如果版本低于6.x，执行升级命令：npm install react-router-dom@latest

第二步：修正App组件代码

你当前的代码存在两个问题：未正确导入Routes、Route组件的组件传值写法不符合v6规范，修正后的完整代码如下：

// 必须同时导入Routes和Route
import { Routes, Route } from 'react-router-dom';

import AllMeetupsPage from './Pages/AllMeetups';
import NewMeetupsPage from './Pages/NewMeetups';
import FavoritesPage from './Pages/Favorites';

function App() {
  return (
    <div>
      <Routes>
        {/* v6要求路由对应组件通过element属性传入，不能直接作为Route子元素 */}
        <Route path='/' element={<AllMeetupsPage />} />
        <Route path='/new-meets' element={<NewMeetupsPage />} />
        <Route path='/favs' element={<FavoritesPage />} />
      </Routes>
    </div>
  );
}

export default App;

第三步：配置根路由包裹组件

需要在项目入口文件（一般为index.js）中用BrowserRouter包裹App组件，否则路由功能无法正常生效：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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