export ‘withRouter‘ (imported as ‘withRouter‘) was not found in ‘react-router-dom‘ 问题解决

目前我的npm的依赖配置如下

 % npm list
imooc-on-blockchain@0.1.0 /Users/domino/VscodeWeb3Projects/imooc-on-blockchain
├── @testing-library/jest-dom@5.16.5
├── @testing-library/react@13.4.0
├── @testing-library/user-event@13.5.0
├── antd@3.11.2
├── babel-plugin-import@1.13.6
├── bignum@0.13.1
├── customize-cra@1.0.0
├── ganache-cli@6.12.2
├── less-loader@11.1.0
├── less@4.1.3
├── localforage@1.10.0
├── match-sorter@6.3.1
├── mocha@10.2.0
├── onchange@7.1.0
├── react-app-rewired@2.2.1
├── react-dom@18.2.0
├── react-router-dom@6.8.1
├── react-scripts@5.0.1
├── react@18.2.0
├── rimraf@4.1.2
├── solc@0.4.24
├── sort-by@1.2.0
├── truffle-hdwallet-provider@0.0.3
├── web-vitals@2.1.4
└── web3@1.8.2

通过自定义withRouter来解决export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom'的报错很简单，否则一个一个的试版本太难了。

自定义withRouter

import {useLocation, useNavigate, useParams} from 'react-router-dom';
const withRouter = Component => props => {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();

    return (
        <Component
            {...props}
            location={location}
            navigate={navigate}
            params={params}
        />
    );
};

export default withRouter;

引用自定义的withRouter

import React from 'react';
import {Menu, Layout} from 'antd';
import {Link} from 'react-router-dom';
import MenuItem from "antd/es/menu/MenuItem";
import withRouter from "./WithRouter"

const Header = Layout.Header

class HeadComp extends React.Component {
    render(){
        return <Header>
            <div className="logo">
                <img src="/imooc.png" alt=""></img>
            </div>
            <Menu
                theme='dark'
                mode='horizontal'
                style={{lineHeight:'60px'}}
                defaultSelectedKeys={[this.props.location.pathname]}
            >
                <MenuItem>
                    <Link to='/'>首页</Link>
                </MenuItem><MenuItem>
                    <Link to='/qa'>问答</Link>
                </MenuItem><MenuItem>
                    <Link to='/create'>我要众筹</Link>
                </MenuItem>
            </Menu>
        </Header>
    }
}

export default withRouter(HeadComp);

如果其他报错，可以尝试删除掉项目目录下的 node_modules目录，并重新执行npm install 命令引入依赖

参考文档： https://stackoverflow.com/questions/71837081/export-withrouter-imported-as-withrouter-was-not-found-in-react-router-do