withRouter'는 react-router-dom에서 내보내지 않습니다.

withRouter'는 react-router-dom에서 내보내지 않습니다.

npm i --save react-router-dom 및 npm install --save with-router --save with-router 를 설치한 후 쓰려고 했습니다.

import {withRouter} from 'react-router';

그러나 이 오류가 발생함 Import 시도 오류: '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 설치 및 필요한 모든 정보를 포함하는 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"
}

저도 같은 문제가 있었어요.다운그레이드하여 수정했습니다.react-router그리고.react-router-dom버전 변경5.2.0.

그냥 뛰어!npm install react-router-dom@5.2.0그리고.npm install react-router@5.2.0이것으로, 에 관한 문제가 해결됩니다.withRouter().

//이 함수와 이 함수를 Import할 수 있습니다.

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

FAQ 페이지에서 후크를 사용하려면 React 16.8 이상이 필요합니다.17.0.2로 정상적으로 동작하고 있습니다.

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

react-router-dom 6을 사용하고 있는 것을 봤는데 버전 5와는 상당히 다릅니다.두 가지 옵션이 있습니다.버전 5로 다운그레이드하거나 새로운 버전을 구현해 보십시오.이 문서는 새로운 매뉴얼입니다.

Well with Router는 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;
}

기능 컴포넌트보다 클래스 컴포넌트를 선호하는 사용자에게 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.

나는 그때 도서관에서 준비된 포장지를 발견하지 못했다.

이전 버전(예: 버전 5)을 설치해 보십시오.최신 버전 6에서는 작동하지 않습니다.그리고 난 네가 그걸 쓰고 있는 걸 알 수 있어.

내 경우 React v.18로 이행한 후 경로가 변경되면 React 앱의 재렌더링이 중지됩니다.

일단 나는 떠났다.react-router-dom이 문제를 해결하려면 루트 내에서 React Strict 모드로 이동합니다.

          <HashRouter>
            <React.StrictMode>
                <App />
            </React.StrictMode>
          </HashRouter>` 

사용해보실 수 있습니다.useSelector부터react-redux주(州)에 접속하고 싶다면

const  isAuthenticated = useSelector((state) => isAuthenticated(state));

리액트 라우터 6을 사용하여withRouter삭제되었습니다.

공식 홈페이지에서 가이드를 팔로우 할 수 있습니다.

자체 파일 "withRouter.js"를 만듭니다.

실제로 후크를 사용할 수 있다고 가정할 때(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;
}

import {withRouter} from 'react-router-dom';

언급URL : https://stackoverflow.com/questions/66465750/withrouter-is-not-exported-from-react-router-dom