Use Anchor in react-router-dom Link

[shyamajp]

Hello! This is a follow-up question to this but I am creating a new discussion since the topic is very different.

What I want to achieve

Navigate to a different page dynamically without loading

What I am trying to do

Combine react-router-dom Link and Paste Anchor together so that it has Paste based link style without loading page

Notes

I know Paste team suggested that Paste Anchor can be passed in component props as in the https://reactrouter.com/web/api/Link/component-reactcomponent, but I cannot get it working. I do see Paste Anchor styles, but it still reloads the page. Could you possibly provide a code snippet to achieve this?

Relavant data

"@twilio-paste/core": "6.0.1"
"react-router-dom": "5.2.0",

[SiTaggart]

Hi @shyamajp

This is a bit of a tricky situation for us honestly. There are many different React based routers people can use. There's React Router, Reach Router, NextJs Link and Gatsby Link just off the top of my head.

They all kind of work slightly differently and all have a bunch of different versions and APIs to support.

We want Paste to be used in as many different applications as possible and as such we can't possible cater for any one router.

What we have done is just export a style HTML anchor element. This way you can use it in any way you need to based on the router you're using. I know this means you need to do some work to wire it up, but honestly this is the most flexible way we can support all of our customers without imposing a particular router on a consuming application.

I've knocked up a little example for React Router just to show how to do it. It's a fair bit of work and funnily enough the react-router-dom docs are incorrect and out of date, so it wasn't the most fun I've had in recent days...

https://codesandbox.io/s/using-anchor-with-react-router-butmi

[shyamajp]

It seems more complicated than I initially thought...but thank you for sharing the code. Very helpful!