Antd Anchor 的 Link 和 React Router 的 Link 之间的冲突

Question

我正在使用 AntDesign 组件 Anchor 和 React Router。弹出一个错误说

Identifier 'Link' has already been declared (77:8)

我了解到 Link 已声明两次，一次用于 React Router，另一次用于 AntDesign 的 Anchor。有没有办法规避这个？我需要两者。 React Router是做路由的，AntDesign的Anchor是做页面跳转的。

设置如下：

import React from 'react'
import { Link } from 'react-router-dom';

import Anchor from 'antd/es/anchor';
const { Link } = Anchor;

const View = () => {
   return (
...//some code here
      <Link to={{pathname: `/tutorial/${item._id}`}}>Item A</Link>
...//some code here
      <Anchor affix={true} showInkInFixed={true} offsetTop={30}>
          <Link href="#a" title="A"/>
          <Link href="#b" title="B"/>
          <Link href="#c" title="C"/>
      </Anchor>
...//some code here
   )
}
export default View

Answer 1

使用 as 关键字进行导入，例如

import { Link as Link1 } from 'react-router-dom';

或删除 const { Link } = Anchor; 并使用 Anchor.Link。

Antd Anchor 的 Link 和 React Router 的 Link 之间的冲突

Conflict between Antd Anchor's Link and React Router's Link

anchor

react-router

antd