时间戳

首页 > 解决方案 > 'withRouter' 不是从 'react-router-dom' 导出的

reactjs - 'withRouter' 不是从 'react-router-dom' 导出的

问题描述

Failed to compile. Attempted import error: 'withRouter' is not exported from 'react-router-dom'.

我的代码就像，我也安装react-router-dom了一个 react-route，我现在已经重新旋转了 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);

标签： reactjsreact-router-dom

解决方案

如果您不小心安装了react-router-domv6，那么withRouterHOC 将不再存在。要么恢复到 v5.x，要么滚动你自己的自定义withRouterHOC 来注入你需要的道具。或者将组件转换为功能组件并使用 React 钩子。

现在也不再history使用一个对象，它被一个navigate通过useNavigate钩子访问的函数所取代。目前尚不清楚以前在哪里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;

推荐阅读