Active class only set when doing a full page refresh

[olalonde]

For some reason, when I click NavItems in my header everything works as expected (the URL changes) but the active class is not updated unless I do a full page refresh. Using react-router's Link component works as expected though.

"react-bootstrap": "^0.28.2",
"react-router-bootstrap": "^0.20.1",
"react-router-redux": "^3.0.0",

[taion]

Works fine for me. Do you have a repro?

[olalonde]

Weird, activeClassName doesn't seem to be doing anything either. :(

[olalonde]

Here's my header file:

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

export default connect()(class extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand className="nav-logo">
            <LinkContainer to="/">
              <a href="/"><img src="/logo.png" alt="Blockai logo" /></a>
            </LinkContainer>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav pullLeft>
            <LinkContainer to="/product">
              <NavItem>Product</NavItem>
            </LinkContainer>
            <LinkContainer to="/pricing" activeClassName="none">
              <NavItem>Pricing</NavItem>
            </LinkContainer>
            <LinkContainer to="/faq" activeClassName="none">
              <NavItem eventKey={3}>FAQ</NavItem>
            </LinkContainer>
          </Nav>
          <Nav pullRight>
            <LinkContainer to="auth/login" activeClassName="none">
              <NavItem eventKey={4}>Login</NavItem>
            </LinkContainer>
            <LinkContainer to="auth/signup" activeClassName="none">
              <MenuItem eventKey={5}>Sign Up</MenuItem>
            </LinkContainer>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    )
  }
})

[olalonde]

Ohhh... removing the connect() and naming the class fixed the problem :P

[taion]

Use pure: false.

[themeteorchef]

Howdy. I'm bumping into this as well. Here's a GIF showing the behavior alongside the code. Any thoughts?

[taion]

This is ultimately just remix-run/react-router#470. Work around it however you think best.

[themeteorchef]

@taion have been trying a few different things (including fiddling with isActive in context) and nothing is really working. Any hints on a workaround for now?

[taion]

Use pure: false on your Redux container. That's all. Follow up on the upstream issue as relevant.

[shawnmclean]

The readme should probably be updated with this.

[DarynHolmes]

Using pure: false helped me and this is how to do it - https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md