Cannot use Link of 'react-router' as component

[timaschew]

I tried to pass a non native HTML element as component like this:

import { Link } from 'react-router'

<Translate to='/courses' component='Link' content='goto-course-list' />

but I got this error, seems like the component was

Warning: link is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of Interpolate.

warning @ warning.js?0260:45assertValidProps @ ReactDOMComponent.js?1302:200ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:454ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225wrapper @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37mountComponentIntoNode @ ReactMount.js?2f23:266Mixin.perform @ Transaction.js?6dff:136batchedMountComponentIntoNode @ ReactMount.js?2f23:282Mixin.perform @ Transaction.js?6dff:136ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70:62batchedUpdates @ ReactUpdates.js?ce09:94ReactMount._renderNewRootComponent @ ReactMount.js?2f23:476wrapper @ ReactPerf.js?ef93:66ReactMount._renderSubtreeIntoContainer @ ReactMount.js?2f23:550ReactMount.render @ ReactMount.js?2f23:570wrapper @ ReactPerf.js?ef93:66(anonymous function) @ index.js?dadc:17(anonymous function) @ bundle.js:3121__webpack_require__ @ bundle.js:521fn @ bundle.js:76(anonymous function) @ bundle.js:552__webpack_require__ @ bundle.js:521(anonymous function) @ bundle.js:544(anonymous function) @ bundle.js:547
client.js?3ac5:53 [HMR] connected

[timaschew]

Okay fixed the runtime error, but it still doesn't do what I want

<Translate to='/courses' content='goto-course-list' component='Link' >foo</Translate>

results of the parent element:

<div data-reactid=".0.0.1.0.1.0">
  <link data-reactid=".0.0.1.0.1.0.1">zur Übersicht aller Kurse
</div>

[martinandert]

@timaschew Would you mind creating a small example (gist?) which will help me to reproduce this? Thanks!

[mateusfccp]

I am having the same problem when making a conditional component that may turn into react-router Link.

const Item = ({children, ...props}) => {
    let Tag;
    if (props.href)
        Tag = 'a'
    else if(props.to)
        Tag = 'Link'
    else
        Tag = 'div'

    return (
        <Tag {...props} className={'item ' + (props.className || '')}>
            { children }
        </Tag>
    );
}

[martinandert]

@mateusfccp Just a quick guess, but shouldn't it be Tag = Link instead of Tag = 'Link'?

[akhayoon]

I had this same problem and it was because I was using lower case instead of <Link />