HOC for Link aka withLink

With the rise of styling libraries like glamorous and styled-components styling component become so much better. But those libraries share a weakness: If I want to style a third-party component like Link I can do it conveniently but I have to trust that the third-party component knows how to handle className prop passed to it by a styling library.

Styling libraries have no way to know if a third-party component uses className properly, thus fail silently in the case of misuse giving no info whatsoever. That can lead to pretty nasty bugs.

Also Link breaks the container/persentational separation. It both provides some data and displays something on the page.

I’d like to propose adding HOC for Link that would solve this problem. With withLink I could do this:

import A from '.styledElements/A'
import withLink from 'react-router-dom/withLink'

const MyLink = withLink((props) => <A {...props}/>) // A is a styled component

This gives me 100% certainty that the styles will be applied and also gives me freedom to choose how I want to present links in my app.

The implementation should be straightforward:

// withLink.js is just slightly changed Link.js
const withLink = (Comp) => class Link extends React.Component {
   // ... nothing changes here
  render() {
    const { replace, to, ...props } = this.props // eslint-disable-line no-unused-vars
    const onClick = this.handleClick
    const href = this.context.router.history.createHref(
      typeof to === 'string' ? { pathname: to } : to
    )
    const passProps = {...props, onClick, href}


    return <Comp {...passProps} />
  }
}

export default withLink

// Link.js
import React from 'react'
import withLink from './withLink'

export default withLink((props) => <a {...props}/>)

[pshrmn]

Not every React Router aware component has to live in the react-router/react-router-dom packages. If you really want this, your best bet is to make your own package. The source is basically just wrapping the existing Link.js code for the withLink function.

function withLink(Component) {
  return class Link extends React.Component {
    // copy most of the code from Link.js, just modifying the render
    render() {
      // ...
      return <Component ... />
    }
  }
}

or modifying the <Link> to take a component prop if you prefer that approach.

class Link extends React.Component {
  // copy...
  render() {
    // ...
    const { component:Component = 'a', ... } = this.props;
    return <Component ... />
  }
}

Maybe toss in a few tests, figure out what to call the package, npm publish it and you’re good to go.

[ncuillery]

Despites the fact that React is all about composition instead of inheritance, I’ve solved this problem in very few lines of code:

import { Button } from 'antd';
import { Link } from 'react-router-dom';

class ButtonLink extends Link {

  render() {
    const linkMarkup = super.render();
    return <Button {...linkMarkup.props} />;
  }

}

Button is a React component which renders a HTML looking like a button if the props href is provided. See https://ant.design/components/button/

I guess it works with any other component like your styled-component.