Weird bug: LinkContainer stops marking links as active when decorating component with connect

[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:

[olalonde]

Seems related: remix-run/react-router#470

But I can't figure out what's the fix :/

[olalonde]

    "react": "^15.1.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "react-router-bootstrap": "^0.23.0",
    "react-router-redux": "^4.0.4"

[olalonde]

Other related issue: remix-run/react-router#3286

[olalonde]

Oops, think I posted this to the wrong repo 😃

[gaearon]

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