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": "//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:
//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