javascript - React-bootstrap-router LinkContainer 不会路由到任何地方

Question

我使用 react-bootstrap-router 链接到 /logout ，它注销用户并将其路由到首页(自动从后端)。我只需要对其进行本质上的 href 即可。

但是 LinkContainer 似乎不起作用？

这是我的源代码:

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>

浏览器的 URL 没有任何变化。

Answer 1

不确定您的实现到底存在什么问题。也许您正在使用 React Router v4，它与 react-router-bootstrap 不太兼容。但是，如果建议的任何内容都不起作用，则尝试以编程方式进行:

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;