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>

浏览器的网址没有任何变化。

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;

Answer 2

您可以尝试使用Link代替LinkContainer或尝试更新到react-router-bootstrap的最新版本，因为我认为此处存在一些版本兼容性问题以及早期版本的LinkContainer 1}}与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>

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

2 个答案: