withRouter' 不是从 'react-router-dom 导出的

Posted 2023-02-22

【中文标题】withRouter\' 不是从 \'react-router-dom 导出的

【英文标题】：withRouter' is not exported from 'react-router-domwithRouter' 不是从 'react-router-dom 导出的

【发布时间】：2021-06-02 13:15:33

【问题描述】：

在 npm i --save react-router-dom 和 npm install --save with-router 之后我尝试写

import withRouter from 'react-router';

但我收到此错误 尝试导入错误：“withRouter”未从“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);

包含我在项目中安装 npm 的依赖项和所有必要信息的文件 package.json。我不明白问题出在哪里，我尝试了很多方法，但没有一个成功

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

【参考方案1】：

我看到您使用的是 react-router-dom 6，它与版本 5 完全不同。您有两个选择，降级到版本 5 或尝试实施新版本这里是新文档documentation

【参考方案2】：

我有同样的问题。我通过将react-router 和react-router-dom 降级到版本5.2.0 来修复它。

只需运行 npm install react-router-dom@5.2.0 和 npm install react-router@5.2.0。这应该可以解决 withRouter() 的问题。

【参考方案3】：

尝试安装旧版本，例如版本 5。它不适用于最新版本 6。我可以看到你正在使用的。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案4】：

//可以导入this和this函数

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;
  

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案5】：

你需要做的

import  withRouter  from 'react-router'

https://reactrouter.com/web/api/withRouter

如果你有上面的代码，你不应该得到这个错误： 尝试导入错误：“withRouter”未从“react-router-dom”导出。

因为您不再尝试从“react-router-dom”导入。如果您仍然看到该错误，我会在项目中搜索“react-router-dom”，并确保您没有尝试将其导入其他地方。

关于 package.json 的评论

如果您查看 package.json，您的 react-router 和 react-router-dom 版本与 types/react-router-dom 的版本不同，不确定这是否相关，但无论如何都可能需要研究。

【讨论】：

我还会在问题中添加我的代码以防万一它有用

确保从你已经拥有的“react-router-dom”中删除导入

我只是上传了我认为我删除了所有不必要的导入的代码

hmm，你确定错误来自那个文件吗？

你能用 package.json 文件更新你的问题吗？

【参考方案6】：

import withRouter from 'react-router-dom';

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的答案添加解释并说明适用的限制和假设。

特别是请解释与达科他州答案的区别。我没有看到任何东西，并且觉得您提出的建议相同。这让我想知道您是否知道那个较旧的答案。

啊哈，“欢迎来到我们友好的 SO”：从一开始就 -6 分：D