Invariant violation when using the Link component in the dynamic menu

Question

I am creating a menu component that displays a list of links that are created using the Link router component of Link.

This is the code that displays each menu item:

  <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 going to another URL can redraw the menu with a different list of links. The problem is that when I display the menu again, 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 checked that the element is .0.0.0.4. $ 12.0 is the tag <a>generated by the Link component in the first render.
I also checked that if I do not use the Link component (and, for example, use a simple tag instead <a>), the exception will disappear. Any thoughts?

: -, , response-router-redux ( ).

Answer 1

, redux-simple-router ( react-router-redux) , , ( <Link>).

gist, .

gist <Page>, SYNC, DONE 100 , render(), . , <Link>, .

componentWillReceiveProps componentWillReceiveProps. componentDidUpdate, . , :

- 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())
+   }
+ }

, <Link>. (, <span> <a>) onClick).