react-router의 Link와 react-bootstrap의 MenuItems를 동시에 사용할 때

Laavel-5-boilerplate의view React화된 작업 노트
react-bootstrap 문서
react-router 문서
teufelj씨로부터 평어를 받아 새로운 해결 방법을 미리 보충했기 때문이다.
대단히 감사합니다
다음 포장에서 두 개의 a라벨이 발생하는 문제를 해결할 수 있습니다.
react-router-bootstrap
다음은 react-router-bootstrap으로 썼습니다.

import React, { PropTypes, Component } from 'react';
import { ButtonGroup, DropdownButton, MenuItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

class BoxHeader extends Component {
  render() {
    return (
      <div className="box-header with-border">
        <h3 className="box-title">Active Users</h3>
        <div className="box-tools pull-right">
          <div className="pull-right" style={{marginBottom: 10}}>
            <ButtonGroup>
              <DropdownButton bsStyle="primary" bsSize="small" title="Users">
                <LinkContainer to={{ pathname: '/access/users'}}>
                  <MenuItem eventKey="1">All User</MenuItem>
                </LinkContainer>
                <LinkContainer to={{ pathname: '/access/users/active'}}>
                  <MenuItem eventKey="2">Active User</MenuItem>
                </LinkContainer>
                <LinkContainer to={{ pathname: '/access/users/deactivated'}}>
                  <MenuItem eventKey="3">Deactivated User</MenuItem>
                </LinkContainer>
                <MenuItem divider />
                <LinkContainer to={{ pathname: '/access/user/create'}}>
                  <MenuItem eventKey="4">Create User</MenuItem>
                </LinkContainer>
                <MenuItem divider />
                <LinkContainer to={{ pathname: '/access/users/deleted'}}>
                  <MenuItem eventKey="5">Deleted Users</MenuItem>
                </LinkContainer>
              </DropdownButton>
              <DropdownButton bsStyle="primary" bsSize="small" title="Roles">
                <LinkContainer to={{ pathname: '/access/roles'}}>
                  <MenuItem eventKey="1">All Roles</MenuItem>
                </LinkContainer>
                <LinkContainer to={{ pathname: '/access/roles/create'}}>
                  <MenuItem eventKey="2">Create Role</MenuItem>
                </LinkContainer>
              </DropdownButton>
              <DropdownButton bsStyle="primary" bsSize="small" title="Permissions">
                <LinkContainer to={{ pathname: '/access/permissions'}}>
                  <MenuItem eventKey="1">All Groups</MenuItem>
                </LinkContainer>
                <LinkContainer to={{ pathname: '/access/permissions'}}>
                  <MenuItem eventKey="2">All Permissions</MenuItem>
                </LinkContainer>
                <LinkContainer to={{ pathname: '/access/permissions'}}>
                  <MenuItem eventKey="3">Create Group</MenuItem>
                </LinkContainer>
                <LinkContainer to={{ pathname: '/access/permissions'}}>
                  <MenuItem eventKey="4">Create Permission</MenuItem>
                </LinkContainer>
              </DropdownButton>
            </ButtonGroup>
          </div>
          <div className="clearfix" />
        </div>
      </div>
    );
  }
}

export default BoxHeader;

하고 싶은 일

재현하고 싶은 건 이 드롭다운 링크입니다.
링크를 클릭하면 한 페이지 내에 라우팅됩니다.

쓴 코드(잘못된 수법이니 모방하지 마세요)

준비한 component 여기 있습니다.

import React, { PropTypes, Component } from 'react';
import { Link } from 'react-router';
import { ButtonGroup, DropdownButton, MenuItem } from 'react-bootstrap';

class BoxHeader extends Component {
  render() {
    return (
      <div className="box-header with-border">
        <h3 className="box-title">Active Users</h3>
        <div className="box-tools pull-right">
          <div className="pull-right" style={{marginBottom: 10}}>
            <ButtonGroup>
              <DropdownButton bsStyle="primary" bsSize="small" title="Users">
                <MenuItem eventKey="1">
                  <Link to="/access/users/active" activeClassName="active" >Active User</Link>
                </MenuItem>
                <MenuItem eventKey="2">
                  <Link to="/access/users/active" activeClassName="active" >Active User</Link>
                </MenuItem>
                <MenuItem eventKey="3">
                  <Link to="/access/users/deactivated" activeClassName="active" >Deactivated User</Link>
                </MenuItem>
                <MenuItem divider />
                <MenuItem eventKey="4">
                  <Link to="/access/user/create" activeClassName="active" >Create User</Link>
                </MenuItem>
                <MenuItem divider />
                <MenuItem eventKey="5">
                  <Link to="/access/users" activeClassName="active" >Deleted Users</Link>
                </MenuItem>
              </DropdownButton>
              <DropdownButton bsStyle="primary" bsSize="small" title="Roles">
                <MenuItem eventKey="1">
                  <Link to="/access/roles" activeClassName="active" >All Roles</Link>
                </MenuItem>
                <MenuItem eventKey="1">
                  <Link to="/access/roles/create" activeClassName="active" >Create Role</Link>
                </MenuItem>
              </DropdownButton>
              <DropdownButton bsStyle="primary" bsSize="small" title="Permissions">
                <MenuItem eventKey="1">
                  <Link to="/access/permissions" activeClassName="active" >All Groups</Link>
                </MenuItem>
                <MenuItem eventKey="1">
                  <Link to="/access/permissions" activeClassName="active" >All Permissions</Link>
                </MenuItem>
                <MenuItem eventKey="1">
                  <Link to="/access/permissions" activeClassName="active" >Create Group</Link>
                </MenuItem>
                <MenuItem eventKey="1">
                  <Link to="/access/permissions" activeClassName="active" >Create Permission</Link>
                </MenuItem>
              </DropdownButton>
            </ButtonGroup>
          </div>
          <div className="clearfix" />
        </div>
      </div>
    );
  }
}

export default BoxHeader;

조금 망설였지만 하는 일은 간단했다
다음은 잡음을 제거하여 쉽게 볼 수 있는 것들입니다.

<ButtonGroup>
  <DropdownButton>
    <MenuItem eventKey="1">
      <Link to="/access/permissions">All User</Link>
    </MenuItem>
  </DropdownButton>
</ButtonGroup>

실제 브라우저에서 이걸 확인하면

이렇게 링크와 링크 사이에 군더더기를 넣습니다.
원인은 각각태그 생성 중

<li role="presentation" class="">
    <a role="menuitem" tabindex="-1" href=""></a>
    <a class="" href="/admin/single/access/users/deactivated">Deactivated User</a>
</li>

여러 번 시도했지만 도저히 해결이 안 돼서 결국 힘으로 처리했죠

.dropdown-menu > li > a[role="menuitem"] {
    display:none;
}

완료