Using Bridge Link component with React Router Dom Link component

[angadgarg25]

I'd like to use the functionality of the Link component from react-router-dom with the styling of the Link component from bridge. Any way to do that? I'm currently doing this:

import { Link as RRLink } from 'react-router-dom'
import { Link } from '@hack4impact-uiuc/bridge'

const MyLink = ({ id }) => (
  <RRLink to={`/workspace/${id}`}>
    <Link as="p">View Workspace</Link>
  </RRLink>
)

This does have the desired functionality, BUT I get errors printing to the console about nesting a tags, since this generates something along the lines of:

<a>
  <a> <a/>
</a>

Is there a better fix for this? BTW, really enjoying working with this design system, great job to the team!

[tko22]

Each component has an as prop that allows you to set the components html tag https://styled-components.com/docs/api#as-polymorphic-prop. So you could do

<RRLink>
    <Link as="span">Some Link text here</Link>
</RRLink>

[angadgarg25]

ah perfect, thanks!