Conditionally linking with react-router Link

My simple functional solution:

const ConditionalLink = ({ children, to, condition }) => (!!condition && to)
      ? <Link to={to}>{children}</Link>
      : <>{children}</>;

Then you can use it like this:

<ConditionalLink to="/path" condition={!isComingFromModal}
  conditional link
</ConditionalLink>

You're right to want to try to avoid repetition in your JSX. I have a couple of strategies I use for this type of situation.

One option uses the fact that Link is just a ReactComponent object, and can be assigned to any variable. You can put a line like this at the beginning of your render method:

var ConditionalLink = !this.props.isComingFromModal ? Link : React.DOM.div;

and then just render your content wrapped in the ConditionalLink component:

return (
    <ConditionalLink>
        <img />
        <div>...</div>
    </ConditionalLink>
);

When your condition is true, ConditionalLink will be a reference to Link; when the condition is false it will be a simple <div>.

Another option you might want to try is to create the content you want to render inside of the Link (or not inside the link) elsewhere, and then do essentially what you're doing above:

var content = (
    <div>
        <img />
        <div>All your content</div>
    </div>
);

return (<If condition={!this.props.isComingFromModal}>
    <Link>
        {content}
    </Link>
    <Else />
    {content}
</If>);

You could also create a function or method to return the content- or put it entirely in a new component.

Finally, to actually answer your question- Yes, you can make a link component that works the way you want! One of the great things about React is that it's really easy to remix existing components. If you want a conditional Link, just create a component that returns either {this.props.children} or <Link {...this.props}>{this.props.children}</Link> based on the value of a prop.