Invariant Violation when using Link component in a dynamic menu - reactjs

Question

I'm building a Menu component which renders a list of links which are created using the react-router Link component.
This is the code which renders each item of the menu:
<li
style={{opacity: this.props.isDragging ? 0 : 1}}
className="list">
<Link to={ this.props.list.url }
activeClassName="active"
className={ this.props.owner && 'draggable'}>
<span>{ this.props.list.title }</span>
{ this.props.owner ?
<div className="list-controls">
<span className="glyphicon
glyphicon-pencil"
aria-hidden="true"
onClick={this.setEditMode.bind(this, true)}>
</span>
<span className="glyphicon
glyphicon-remove"
aria-hidden="true"
onClick={this.deleteList.bind(this)}></span>
</div> : null
}
</Link>
</li>;
The menu is dynamic. This means that navigating to another url may re-render the menu with a different list of links. The problem is that when the menu is re-rendered, I get the following exception:
Uncaught Error: Invariant Violation: findComponentRoot(..., .0.0.0.4.$12.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a '<tbody>' when using tables, nesting tags like '<form>, <p>, or <a>', or using non-SVG elements in an <svg>' parent. Try inspecting the child nodes of the element with React ID ``.
I've checked that the .0.0.0.4.$12.0 element is the <a> tag generated by the Link component in the first render.
I've also checked that if I don't use the Link component (and, for example, use a simple <a> tag instead), the exception goes away. Any thoughts?
UPDATE: Apparently the error showed up when I started using react-router-redux (formerly redux-simple-router).

Answer 1

I ran into the same issue on a project using redux-simple-router (now react-router-redux) and was able to fix it by changing which lifecycle methods I was using to dispatch actions (which I was using to rerender a component with different <Link> components).
I created a reduced example in a gist which I got working with this revision.
In the gist there is a <Page> component which dispatches a SYNC action immediately and then a DONE action after 100ms which changes render() to show a loading indicator. Once loaded, the component was rendering some conditional elements, and one of them was a <Link> which was causing the same Invariant Violation.
Originally I was dispatching the actions from within the page's componentWillReceiveProps lifecycle method. When I changed it to componentDidUpdate the error went away. Here's the relevant code that I changed:
- componentWillReceiveProps(nextProps) {
- if (nextProps.params.param !== this.props.params.param) {
- nextProps.dispatch(fetch())
- }
- }
+ componentDidUpdate(prevProps) {
+ if (prevProps.params.param !== this.props.params.param) {
+ this.props.dispatch(fetch())
+ }
+ }
On a side note, I noticed that the error wasn't exclusive to rerendering <Link> components. I was able to recreate the same error when using any element (like a <span> or <a>) with an onClick handler).