logo标签列表

'withRouter'未从'react-router-dom'导出。

reactjsreact-routerreact-router-dom
50

在执行 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);

我将 package.json 文件和其中所需的所有信息作为 npm install 安装在项目中的依赖项。但我无法理解问题出在哪里，尝试了许多方法都没有解决问题。

{
  "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"
}
FYI：这里是关于 Switch 未被导出的问题的链接：https://dev59.com/8lIG5IYBdhLWcg3wvEHW - yaobin
13个回答
19

我曾经遇到过同样的问题。我通过将react-router和react-router-dom版本降级至5.2.0来解决它。

只需运行npm install react-router-dom@5.2.0和npm install react-router@5.2.0即可解决使用withRouter()出现的问题。

16

//你可以导入这个模块，以及这个函数

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;
  }
1
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
10

从常见问题解答页面了解到，使用hooks需要React 16.8或更高版本。我目前使用的是17.0.2版本，看起来可以正常工作：

https://reactrouter.com/en/main/start/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;
}
8
由于withRouter在react-router v6中已被删除，您可以创建自己的函数。
import { useNavigate } from 'react-router';

export const withRouter = (Component) =>{
    const Wrapper = (props) =>{
        const history = useNavigate();
        return <Component history={history} {...props}/>
    } 
    return Wrapper;
}
如何在我的组件中使用上述函数。 - ekibet
使用withRouter函数作为HOC高阶组件，以下是完整的HOC函数文档链接： https://reactjs.org/docs/higher-order-components.html#:~:text=A%20higher%2Dorder%20component%20(HOC,and%20returns%20a%20new%20component. - Shoaib Muhammad Arif
7
我看到你正在使用react-router-dom 6，它与版本5有很大不同。你有两个选择，要么降级至版本5，要么尝试实现新版本，这是新文档的链接：文档。
5

对于那些喜欢类组件胜过函数组件的人，react-route-dom v6 的等效解决方案是：

import { useLocation } from "react-router-dom";

const withLocation = Component => props => {
    const location = useLocation();
  
    return <Component {...props} location={location} />;
  };


export default withLocation( MyComponent)

同样适用于 useNavigation 和 useParams。我目前没有在库中找到现成的包装器。
0
在我的情况下，迁移到 React v.18 后，当路由改变时，React 应用程序停止重新渲染；
目前，我仍然使用 v.5 的 react-router-dom，但为了解决这个问题，我将 React 严格模式放在了 Route 内部：moved。
          <HashRouter>
            <React.StrictMode>
                <App />
            </React.StrictMode>
          </HashRouter>`
0

尝试安装旧版本，例如版本5。它不会在最新版本6上运行。我可以看到这就是你正在使用的。

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
0
使用 react-router 6，withRouter 已被删除。
您可以参考官方网站的指南。
创建自己的文件“withRouter.js”。

假设您实际上可以使用 hooks（您正在使用 React 16.8+），您只需要一个包装器。

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

1
虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - TAbdiukov
0
如果您需要在数据获取中使用参数，编写逻辑以根据它们呈现ClassComponent和渲染组件，然后为您的ClassComponentContainer创建包装器。
import { useLocation, useParams } from 'react-router-dom';
import ClassComponentContainer from './ClassComponentContainer';

export default function ClassComponentWrap(props) {
 const location = useLocation();
 const params = useParams();

 return <ClassComponentContainer location={location} params={params} />
}

之后只需在props中使用包含params的ClassComponent

import React from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import PresentationComponent from './PresentationComponent';

class ClassComponent extends React.Component {
 componentDidMount() {
  let postID = this.props.params.postID;
  axios.get(`https://jsonplaceholder.typicode.com/posts/${postID}`)
       .then((response) => {console.log(response)})
 }
 render() {
  return <PresentationComponent {...this.props} />
 }
}

const mapStateToProps = (state) => {...}
const mapDispatchToProps = (dispatch) => {...}

const ClassComponentContainer = connect(mapStateToProps, mapDispatchToProps)(ClassComponent);

export default ClassComponentContainer;

并在Route元素属性中使用ClassComponentWrap组件

import { BrowserRouter, Route, Routes } from "react-router-dom";
import ClassComponentWrap from './components/ClassComponentWrap';

export default function App(props) {
 return (
  <BrowserRouter>
   <Routes>
    <Route path="/posts/:postID?" element={<ClassComponentWrap />} />
   </Routes>
  </BrowserRouter>
 );
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接