Feature Request: <Link component>

[LazyElephant]

Why

TLDR: This will create a consistent interface in both react-router-dom and react-router-native, allowing code reuse.

I just started building an app using React Native/React Native Web with the goal of using 99.9% of the same code. I decided to use React Router with it since both the web and native versions offer the same library components (mostly). This allows me to alias react-router-native to react-router-dom with webpack, resulting in the correct library being called based on the platform.

By adding the 'component' prop to the Link component in react-router-dom, cross platform components can be rendered instead of an anchor tag.

Example Usage

<Link
     to="/about"
     component={TouchableHighlight}
     underlayColor='#f0f4f7'
     style={styles.navItem}>
        <Text>About</Text>
</Link>

I already made this change with tests in a forked repo here and the proof of concept project I'm working on is here. If you would like to make this change, I can make a pull request any time.

[pshrmn]

This has been discussed a number of times and just isn't going to happen. Using anything besides an anchor opens up accessibility issues that React Router does not want to expose users to.

If you want this behavior, you can easily clone Link.js, make the modifications to allow for custom components, and include that in your project. You could even open source and release that as a package. As I said, there are other people that want this behavior, but it just isn't something that React Router wants to encourage.

[mjackson]

Thanks for the offer of help here, @LazyElephant. I'd like to figure out a way we can help you with this.

In the past we had a contributor who was very adamant that we always render a <a> with react-router-dom's <Link> component (see e.g. #4625), but your use case is really compelling. Would you still be open to helping us out with a PR?

[krainboltgreene]

I made dis: https://www.npmjs.com/package/react-router-component-link