&#39；WITH路由器&#39；不是从&#39；REACT-ROUTER-DOM&#39；导出的。 [英] 'withRouter' is not exported from '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-domv6，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;

这篇关于&#39；WITH路由器&#39；不是从&#39；REACT-ROUTER-DOM&#39；导出的。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！