React-bootstrap-router LinkContainer doesn't route anywhere

Question

I use react-bootstrap-router where I want to link to /logout which logs out the user and routes them to the front-page(automatically, from the backend). I simply need to make what is essentially a href to it.

But LinkContainer doesnt appear to work?

Here's my sourcecode:

import { LinkContainer } from 'react-router-bootstrap';

<Dropdown id="dropdown-custom-1">
    <Dropdown.Toggle>
        <Glyphicon glyph="cog" />
    </Dropdown.Toggle>
    <Dropdown.Menu style={{textAlign: "left", right: "0", left: "auto"}}>
        <MenuItem className='disabled u-graph-text'>
            <Glyphicon glyph="user" style={{paddingRight: "10px"}}/>
            {this.state.data.username}
            </div>
        </MenuItem>
        <MenuItem divider />
        <LinkContainer to="/logout" activeClassName="active"> // It doesn't do anythign here?
            <MenuItem className="u-graph-text">
                log out
            </MenuItem>
        </LinkContainer>
    </Dropdown.Menu>
</Dropdown>

Nothing changes in the URL of the browser.

Answer 1

Not sure what exactly is the problem with your implementation. Maybe you are using React Router v4, which is not quite compatible with react-router-bootstrap . But if nothing proposed works then try to do it in a programmatic way:

import React from 'react';
import {Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap';
import {Route} from 'react-router-dom';

class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.handleLink = this.handleLink.bind(this);
  }

  handleLink(path) {
    this.props.history.push(path);
  }
  render() {
    return (
      <Dropdown id="dropdown-custom-1">
        <Dropdown.Toggle>
          <Glyphicon glyph="cog" />
        </Dropdown.Toggle>
        <Dropdown.Menu style={{textAlign: "left", right: "0", left: "auto"}}>
          <MenuItem className='disabled u-graph-text'>
            <Glyphicon glyph="user" style={{paddingRight: "10px"}}/>
            {this.state.data.username}
          </div>
          </MenuItem>
          <MenuItem divider />
          <MenuItem className="u-graph-text" onClick={()=>this.handleLink("logout")}>
            log out
          </MenuItem>
        </Dropdown.Menu>
      </Dropdown>
    );
  }
}

YourComponent.propTypes = {};

export default YourComponent;

Answer 2

You can try to use Link instead of LinkContainer or try to update to the latest version of react-router-bootstrap because I think there is some version compatibility issues here and earlier versions of LinkContainer were not compatible with MenuItem .

import { Link } from 'react-router';

<Dropdown id="dropdown-custom-1">
    <Dropdown.Toggle>
        <Glyphicon glyph="cog" />
    </Dropdown.Toggle>
    <Dropdown.Menu style={{textAlign: "left", right: "0", left: "auto"}}>
        <MenuItem className='disabled u-graph-text'>
            <Glyphicon glyph="user" style={{paddingRight: "10px"}}/>
            {this.state.data.username}
            </div>
        </MenuItem>
        <MenuItem divider />

            <MenuItem className="u-graph-text">
                <Link to="/logout">log out</Link>
            </MenuItem>
    </Dropdown.Menu>
</Dropdown>