';WITH路由器';不是从';REACT-ROUTER-DOM';导出的。 [英] 'withRouter' is not exported from 'react-router-dom'
本文介绍了';WITH路由器';不是从';REACT-ROUTER-DOM';导出的。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Failed to compile. Attempted import error: 'withRouter' is not exported from 'react-router-dom'.
我的代码类似,我还安装了react-router-dom
一个反应路线,现在我已经在应用程序中回复了10次
import React from 'react';
import {withRouter} from 'react-router-dom';
import './menu-item.scss';
const MenuItem = ({ title, imageUrl, size, history }) => (
<div className={`${size} menu-item`}>
<div
className='background-image'
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
<div className='content'>
<h1 className='title'>{title.toUpperCase()}</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
);
export default withRouter(MenuItem);
推荐答案
如果您意外安装了react-router-dom
v6,withRouter
即席将不复存在。或者恢复到v5.x,或者使用您自己的withRouter
自定义withRouter
来注入您需要的道具。或者将组件转换为功能组件并使用Reaction挂钩。
history
对象可供使用,它被通过useNavigate
挂钩访问的navigate
函数所取代。不清楚以前在哪里使用了history
,但如果您需要强制导航,以下是访问导航的方式。如果继续使用V6,则以下是访问navigate
功能的方法。
import React from 'react';
import { useNavigate } from 'react-router-dom';
import './menu-item.scss';
const MenuItem = ({ title, imageUrl, size }) => {
const navigate = useNavigate();
// navigate("/targetPath")
return (
<div className={`${size} menu-item`}>
<div
className='background-image'
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
<div className='content'>
<h1 className='title'>{title.toUpperCase()}</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
)
};
export default MenuItem;
这篇关于';WITH路由器';不是从';REACT-ROUTER-DOM';导出的。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文