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

Question

I'm using AntDesign component Anchor, with React Router. An error popped up saying

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

I understand that the Link has been declared twice, once for React Router, and the other for AntDesign's Anchor. Is there a way to circumvent this? I need both. The React Router is for routing, and the AntDesign's Anchor is for jumping to different sections on a page.

Here's the setup:

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

Either with the as keyword for the import e.g.

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

or remove const { Link } = Anchor; and use Anchor.Link.