Conflict with react-router-dom --- can't use link for single page app if you use it for smooth scroll

[Ivan1023]

The issue happens when you have a single page app that require the Link tag to move from current page to a different page. But since "Link" has been declared already you can't use it again.

React-route-dom https://www.npmjs.com/package/react-router-dom

Any ideas on how you would work around this?

[jasonlimantoro]

Can you alias one of the named imports instead?

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

const Component = () => (
  <div>
    <ScrollLink to='section1'>This will scroll</ScrollLink>
    <Link to='/another'>This will redirect to another page</Link>
  </div>
);

Of course, you can do the opposite as well, i.e. aliasing the react-router-dom's Link component instead.