目前我的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