React Router中替换<Switch>为<Routes>时出现编译错误求助

在React项目中将react-router的<Switch>组件替换为<Routes>后，项目编译失败，出现多个导出相关错误。

App.js代码 #

import './App.css';
import { BrowserRouter,Routes,Router,Route,Link } from "react-router-dom";
import React, { Component } from 'react'
import NavBar from './components/NavBar';
import News from './components/News';

export default class App extends Component {
  c=' John'
  render() {
    return (
      <div>
      <Router>
      <NavBar/>

      <Routes>

          <Route exact path="/" element={<News pageSize={5} country="in" category="general"/>} />
          <Route exact path="/business" element={<News pageSize={5} country="in" category="business"/>}/>
          <Route exact path="/entertainment" element={<News pageSize={5} country="in" category="entertainment"/>}/>
          <Route exact path="/general" element={<News pageSize={5} country="in" category="general"/>}/>
          <Route exact path="/health" element={<News pageSize={5} country="in" category="health"/>}/>
          <Route exact path="/science" element={<News pageSize={5} country="in" category="science"/>}/>
          <Route exact path="/sports" element={<News pageSize={5} country="in" category="sports"/>}/>
          <Route exact path="/technology" element={<News pageSize={5} country="in" category="technology"/>}/>

      </Routes>

      </Router>
      </div>
    )
  }
}

编译报错信息 #

ERROR in ./node_modules/react-router-dom/index.js 14:0-439

在'react-router'中未找到导出的'NavigationType'（被重导出为'NavigationType'）（可用导出：MemoryRouter, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes）


ERROR in ./node_modules/react-router-dom/index.js 14:0-439

在'react-router'中未找到导出的'createPath'（被重导出为'createPath'）（可用导出：MemoryRouter, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes）


ERROR in ./node_modules/react-router-dom/index.js 14:0-439

在'react-router'中未找到导出的'parsePath'（被重导出为'parsePath'）（可用导出：MemoryRouter, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes）


ERROR in ./node_modules/react-router-dom/index.js 306:37-47

在'react-router'中未找到导出的'createPath'（导入为'createPath'）（可用导出：MemoryRouter, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes）


ERROR in ./node_modules/react-router-dom/index.js 306:62-72

在'react-router'中未找到导出的'createPath'（导入为'createPath'）（可用导出：MemoryRouter, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes）

解决方案 #

• 版本不兼容问题：报错核心是react-router-dom和react-router版本不匹配，react-router-dom依赖的某些导出在当前react-router版本中不存在。执行以下命令统一升级到最新稳定版：

  npm install react-router-dom@latest react-router@latest
  

  或者使用yarn：

  yarn add react-router-dom@latest react-router@latest
  

• 代码中的两处问题：

  1. 错误使用<Router>组件：代码中导入了BrowserRouter却用了基础的<Router>，<Router>需要手动传入history对象，而BrowserRouter已经封装好了浏览器的history，应该替换为<BrowserRouter>。
  2. 移除exact属性：在react-router v6中，<Routes>已经默认实现了精准匹配，不再需要exact属性，所有<Route>上的exact都可以删掉。

修改后的App.js代码：

import './App.css';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import React, { Component } from 'react'
import NavBar from './components/NavBar';
import News from './components/News';

export default class App extends Component {
  c=' John'
  render() {
    return (
      <div>
        <BrowserRouter>
          <NavBar/>
          <Routes>
            <Route path="/" element={<News pageSize={5} country="in" category="general"/>} />
            <Route path="/business" element={<News pageSize={5} country="in" category="business"/>}/>
            <Route path="/entertainment" element={<News pageSize={5} country="in" category="entertainment"/>}/>
            <Route path="/general" element={<News pageSize={5} country="in" category="general"/>}/>
            <Route path="/health" element={<News pageSize={5} country="in" category="health"/>}/>
            <Route path="/science" element={<News pageSize={5} country="in" category="science"/>}/>
            <Route path="/sports" element={<News pageSize={5} country="in" category="sports"/>}/>
            <Route path="/technology" element={<News pageSize={5} country="in" category="technology"/>}/>
          </Routes>
        </BrowserRouter>
      </div>
    )
  }
}

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