connect prevents LinkContainer from marking links as active

[olalonde]

Took me a while to figure this one out. For some strange reason, when I use connect to decorate my component, <LinkContainer> stops marking links as active. If I remove the connect()(Header) call, <LinkContainer> works as expected.

import React from 'react'
import { connect } from 'react-redux'
import { LinkContainer } from 'react-router-bootstrap'
import {
  Nav,
  Navbar,
  NavItem,
} from 'react-bootstrap'

class Header extends React.Component {
  render() {
    return (
      <div>
        <Navbar>
          <Navbar.Collapse>
            <Nav pullLeft>
              <LinkContainer to="/dashboard/registrations">
                <NavItem>
                  Registrations
                </NavItem>
              </LinkContainer>
              <LinkContainer to="/dashboard/monitoring">
                <NavItem>
                  Monitoring
                </NavItem>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    )
  }
}

export default Header

/*
When using connect(), LinkContainer stops working and
links are no longer marked as active when URL changes
*/

// export default connect()(Header)

Here's the behaviour I get when using connect:

Thinks those are related but I can't figure out a quick/official fix:

remix-run/react-router#3286
remix-run/react-router#470

[gaearon]

This is fixed in React Router 3.0.0-alpha.1 and newer.

[gaearon]

In fact the last comment in the issue you linked says exactly that 😉
remix-run/react-router#470 (comment)

[olalonde]

@gaearon thanks. Upgrading to React Router 3.0.0-alpha.1 doesn't appear to have fixed the problem :(

Got this warning though:

npm WARN react-router-bootstrap@0.23.0 requires a peer of react-router@>=2.0.0 but none was installed.

[olalonde]

Just tested with <Link> directly and same problem.

[olalonde]

export default connect(s => ({
  user: s.user,
}))(withRouter(Header))

fixed the problem.

[gaearon]

The Link component is fixed in router 3.0 alpha 1. Not the LinkContainer component from the router bootstrap package. Unfortunately it doesn't even use the Link directly so it doesn't benefit from the Link being fixed. I will file an issue there.

[olalonde]

@gaearon ah ok thanks. Any idea why withRouter() fixed the problem anyway?

[gaearon]

@olalonde Because both withRouter() and Link contain the necessary fix.

[gaearon]

FWIW you can use withRouter(LinkContainer) as a temporary measure.