在用<Switch>替换反应路由器中的<Routes>时发生错误

Question

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>
    )
  }
}

‘-列出项目

用问题汇编:X

错误出现在./node_node/react路由器-dom/index.js 14:0-439

出口'NavigationType‘(作为’NavigationType‘再出口)没有出现在’react路由器‘(可能的出口: MemoryRouter、导航、出口、路由、路由器、路由、UNSAFE_LocationContext、UNSAFE_NavigationContext、UNSAFE_RouteContext、createRoutesFromChildren、generatePath、matchPath、matchRoutes、renderMatches、resolvePath、useHref、useInRouterContext、useLocation、useMatch、useNavigate、useLocation、、in 20#、、)。

错误出现在./node_node/react路由器-dom/index.js 14:0-439

出口'createPath‘(作为’createPath‘再出口)没有出现在’react路由器‘(可能的出口: MemoryRouter、导航、出口、路由、路由器、路由、UNSAFE_LocationContext、UNSAFE_NavigationContext、UNSAFE_RouteContext、createRoutesFromChildren、generatePath、matchPath、matchRoutes、renderMatches、resolvePath、useHref、useInRouterContext、useLocation、useMatch、useNavigate、useLocation、、in 20#、、)。

错误出现在./node_node/react路由器-dom/index.js 14:0-439

出口'parsePath‘(作为’parsePath‘再出口)没有出现在’react路由器‘(可能的出口: MemoryRouter、导航、出口、路由、路由器、路由、UNSAFE_LocationContext、UNSAFE_NavigationContext、UNSAFE_RouteContext、createRoutesFromChildren、generatePath、matchPath、matchRoutes、renderMatches、resolvePath、useHref、useInRouterContext、useLocation、useMatch、useNavigate、useLocation、、in 20#、、)。

错误出现在./node_modules/react路由器-dom/index.js 306:37-47

出口'createPath‘(进口为'createPath')没有出现在’react路由器‘(可能的出口: MemoryRouter、导航、出口、路由、路由、UNSAFE_LocationContext、UNSAFE_NavigationContext、UNSAFE_RouteContext、createRoutesFromChildren、generatePath、matchPath、matchRoutes、renderMatches、resolvePath、useHref、useInRouterContext、useLocation、useMatch、useNavigate、useLocation、)。

错误出现在./node_modules/react路由器-dom/index.js 306:62-72

出口'createPath‘(进口为'createPath')没有出现在’react路由器‘(可能的出口: MemoryRouter、导航、出口、路由、路由、UNSAFE_LocationContext、UNSAFE_NavigationContext、UNSAFE_RouteContext、createRoutesFromChildren、generatePath、matchPath、matchRoutes、renderMatches、resolvePath、useHref、useInRouterContext、useLocation、useMatch、useNavigate、useLocation、)。

Answer 1

我的猜测是，您正在尝试升级react-router-dom，但没有完全正确地完成它，留下了一些v5安装。react-router-dom使用了许多来自react-router的“低级”组件和实用程序，错误告诉您react-router-dom无法找到由react-router导出的这些v6组件/实用程序。我怀疑你还安装了react-router@5。

react-router-dom@6将all of react-router再导出，因此无需安装react-router。

react-routernpm uninstall -S react-router卸载

安装最新react-router-domnpm install -S react-router-dom@latest的

此外，您正在使用低级别的Router，它缺少一些所需的道具。我看到您也导入了BrowserRouter，我猜您可能打算使用它。为了简洁起见，导入BrowserRouter as Router是很常见的(一个假设)。

示例：

import './App.css';
import { BrowserRouter as Router, 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>
        <Router> //<-- really a BrowserRouter now
          <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>
        </Router>
      </div>
    );
  }
}