question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot use Link of 'react-router' as component

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 8 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
akhayooncommented, Aug 16, 2016

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

1reaction
martinandertcommented, Jan 5, 2016

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Router Link is not working - Stack Overflow
It seems I am missing like basic doesn't work. My Link component updates the URL to be /products/singleproduct but my page just breaks.......
Read more >
Link v6.6.1 - React Router
A <Link> is an element that lets the user navigate to another page by clicking or tapping on it. In react-router-dom , a...
Read more >
How to Handle Routing in a React Application using the React ...
The Route component is responsible to render the UI when its path matches the current URL. As you can see in the code,...
Read more >
Complete guide to authentication with React Router v6
The <Route /> component can be thought of like an if statement; it will act upon a URL location with its element only...
Read more >
React Router - Testing Library
import {Link, Route, Routes, useLocation} from 'react-router-dom' ... If you find yourself adding Router components to your tests a lot, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found