Después de npm i --save react-router-dom y npm install --save with-router intenté escribir
import {withRouter} from 'react-router';Pero recibo este error Intento de error de importación: 'withRouter' no se exporta desde '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);Archivo package.json con las dependencias que hago npm install en el proyecto y toda la información necesaria. No puedo entender dónde está el problema. Intenté de muchas maneras, pero ninguna funcionó.
{ "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" }import {withRouter} from 'react-router-dom';
necesitas hacer
import { withRouter } from 'react-router'https://reactrouter.com/web/api/withRouter
Si tiene el código anterior, no debería recibir este error: Intento de error de importación: 'withRouter' no se exporta desde 'react-router-dom'.
Porque ya no estás intentando importar desde 'react-router-dom'. Si aún ve ese error, haría una búsqueda de proyecto para 'react-router-dom' y me aseguraría de que no esté tratando de importarlo en otro lugar.
Si echa un vistazo a package.json, tiene diferentes versiones de react-router y react-router-dom que las que tiene para types/react-router-dom no estoy seguro de que esté relacionado, pero podría ser algo para investigar de todos modos. .
// puedes importar esto y esta función
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; }Tuve el mismo problema. Lo arreglé degradando react-router y react-router-dom a la versión 5.2.0 .
Simplemente ejecute npm install react-router-dom@5.2.0 y npm install react-router@5.2.0 . Esto debería solucionar el problema con withRouter() .
Vi que está usando react-router-dom 6 y es bastante diferente de la versión 5. Tiene 2 opciones, cambiar a la versión 5 o intentar implementar la nueva versión. Aquí está la nueva documentación .
Intente instalar la versión anterior, por ejemplo, la versión 5. No funcionará en la última versión 6. Y puedo ver que eso es lo que está usando.
Desde la página de preguntas frecuentes, debe tener React 16.8+ para poder usar ganchos. Estoy en 17.0.2, parece funcionar bien:
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; }