Attempted import error: withrouter is not exported from react-router-dom.

In package.json file react-router-dom dependencies added. App component wrapped by BrowswerRouter , but when I wrap route by switch it says the following error Switch' is not exported from 'react-router-dom'. I deleted the package.json.lock ,node modules, installed npm again and npm install @babel/core --save. Still not working. I successfully wasted 6 hour for this. Can you please help me to fix this? why it's not importing?

Index.js

import {BrowserRouter} from 'react-router-dom';
 ReactDOM.render(
   <BrowserRouter>
      <App />
   </BrowserRouter>,
   document.getElementById('root')
 );
 

App.js:

 import logo from './logo.svg';
 import './App.css';
 import React from 'react';
 import {Switch,Route,Link} from 'react-router-dom';
 import Home from './Home';
 class App extends React.Component {
   componentDidMount(){
     alert('mounting');
   }
   componentDidUpdate(){
     alert('updated');
   }
  render(){
   return (
          <div className="App">
           <div>
       <Link to="/">Home</Link>
     </div>
     <hr />
     <Switch>
       <Route exact path="/">
         <Home/>
       </Route>
     </Switch>
     </div>



 );
 }
 }
 export default App;
 import React from 'react';
 const Home = () => {
 return <h2>Home</h2>;
 };
 export default Home;

package.json

"dependencies": {
     "@babel/core": "^7.16.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "^6.0.0",
     "react-router-dom": "^6.0.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
 

After npm i --save react-router-dom and npm anycodings_react-router install --save with-router I tried to write

import {withRouter} from 'react-router';

But I Get this error Attempted import error: anycodings_react-router 'withRouter' is not exported from anycodings_react-router 'react-router'.

import React from 'react';
import PropTypes from 'prop-types';
import { Formik } from 'formik';
import {
  Box,
  Button,
  Card,
  CardContent,
  CardHeader,
  Divider,
 } from '@material-ui/core';
import { connect } from 'react-redux';
import jsonGR from "src/assets/data/greek.json";
import jsonEN from "src/assets/data/english.json";
import { LAN_EN }  from 'src/actions/types';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import AddIcon from '@material-ui/icons/Add';
import axios from 'axios';
import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography';
import { withRouter } from 'react-router'

class ProfileDetails extends React.Component {
//code
}
};
  ProfileDetails.propTypes = {
    className: PropTypes.string
  };

const mapStateToProps = state => {
  return { loginsession: state.loginsession,
    selectedlan: state.selectedlan };
};

export default withRouter(ProfileDetails);

File package.json with dependencies that I anycodings_react-router make npm install in the project and all the anycodings_react-router necessary information. I can't understand anycodings_react-router where is the problem I try with many ways anycodings_react-router but no one worked

{
  "name": "react-material-dashboard",
  "author": "Apanay22",
  "licence": "MIT",
  "version": "1.0.0",
  "private": false,
  "scripts": {
    "start": "react-scripts start http-server ",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/styles": "^4.10.0",
    "axios": "^0.21.1",
    "bcrypt": "^5.0.0",
    "chart.js": "^2.9.3",
    "clsx": "^1.1.1",
    "compress.js": "^1.1.2",
    "cors": "^2.8.5",
    "csv-parse": "^4.15.1",
    "express": "^4.17.1",
    "formik": "^2.1.5",
    "glob": "^7.1.6",
    "gulp": "^4.0.2",
    "history": "^5.0.0",
    "lodash": "^4.17.19",
    "material-ui-popup-state": "^1.7.1",
    "moment": "^2.27.0",
    "mui-datatables": "^3.7.6",
    "nprogress": "^0.2.0",
    "papaparse": "^5.3.0",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.10.0",
    "react-csv-reader": "^3.2.1",
    "react-dom": "^16.13.1",
    "react-feather": "^2.0.8",
    "react-helmet": "^6.1.0",
    "react-hot-toast": "^1.0.2",
    "react-image-file-resizer": "^0.4.2",
    "react-navigation": "^4.4.4",
    "react-perfect-scrollbar": "^1.5.8",
    "react-redux": "^7.2.2",
    "react-router": "^6.0.0-beta.0",
    "react-router-dom": "^6.0.0-beta.0",
    "react-scripts": "^3.4.1",
    "react-toast-notifications": "^2.4.0",
    "react-toastify": "^7.0.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "use-history": "^1.4.1",
    "uuid": "^8.3.0",
    "with-router": "^1.0.1",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.1.7",
    "concurrently": "^5.3.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^2.5.1",
    "prettier": "^1.19.1"
  },
  "proxy": "http://localhost:9000"
}

3

Answers 3 : of withRouter is not exported from react-router-dom

From the FAQ page, you do need to have anycodings_react-router-dom React 16.8+ to be able to use hooks. I'm anycodings_react-router-dom on 17.0.2, seems to work fine:

https://reactrouter.com/docs/en/v6/faq

import {
  useLocation,
  useNavigate,
  useParams
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

0

2022-09-16T02:23:01+00:00 2022-09-16T02:23:01+00:00Answer Link

jidam

4

Answers 4 : of withRouter is not exported from react-router-dom

I saw you are using react-router-dom 6 anycodings_react-router-dom and it is a quite different from the anycodings_react-router-dom version 5. You have 2 options, downgrade anycodings_react-router-dom to the version 5 or try implement the anycodings_react-router-dom new version here is the new anycodings_react-router-dom documentation documentation

0

2022-09-16T02:23:01+00:00 2022-09-16T02:23:01+00:00Answer Link

joy

Why is withRouter not exported from react router Dom?

How do I fix attempted import error Switch is not exported from react router Dom?

How do I import withRouter in react?

How do you solve routes is not exported from react router Dom?