Error occurs while replacing <Switch> with <Routes> in react-router

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

Compiled with problems:

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

export 'NavigationType' (reexported as 'NavigationType') was not found in 'react-router' (possible exports: 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

export 'createPath' (reexported as 'createPath') was not found in 'react-router' (possible exports: 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

export 'parsePath' (reexported as 'parsePath') was not found in 'react-router' (possible exports: 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

export 'createPath' (imported as 'createPath') was not found in 'react-router' (possible exports: 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

export 'createPath' (imported as 'createPath') was not found in 'react-router' (possible exports: 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)

Answer 1

My guess is that you are trying to upgrade react-router-dom and didn't quite get it right, leaving some v5 installations. react-router-dom uses a lot of "low-level" components and utilities from react-router and the error(s) is/are telling you that react-router-dom can't find these v6 components/utilities exported by react-router. I suspect you've still react-router@5 installed.

react-router-dom@6 re-exports all of react-router, so there's no need to have react-router installed as well.

1. Uninstall react-router:

   npm uninstall -S react-router

2. Install latest react-router-dom:

   npm install -S react-router-dom@latest

Additionally you are using the low-level Router that is missing some required props. I see you also imported the BrowserRouter and I'm guessing you likely meant to use that. It's common to import the BrowserRouter as Router for brevity (an assumption).

Example:

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