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

Question

我使用 react-bootstrap-router 我想 link 到 /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

你可以尝试使用Link代替LinkContainer或者尝试更新到最新版本的react-router-bootstrap因为我认为这里和早期版本的有一些版本兼容性问题LinkContainer 与 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>

Answer 2

不确定您的实施到底有什么问题。也许您正在使用 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;

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

React-bootstrap-router LinkContainer doesn't route anywhere

javascript

twitter-bootstrap

reactjs

react-bootstrap

react-router