react-routerのLinkとreact-bootstrapのMenuItemsを同時に使うとき

Laravel-5-boilerplateのviewをReact化する作業のメモ
[react-bootstrapのドキュメント](https://react-bootstrap.github.io/components.html)
[react-routerのドキュメント](https://github.com/rackt/react-router/tree/master/docs)

teufeljさんよりコメントを頂き新しい解決法がわかりましたので追記しておきます。
ありがとうございます
以下のパッケージでaタグが２つ生成される問題が解決できるようです。
[react-router-bootstrap](https://github.com/react-bootstrap/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;

```
##やりたいこと
再現したいのはこのドロップダウンのリンクです
リンクをクリックするとシングルページ内でルーティングされます。
<img width="361" alt="スクリーンショット 2016-01-20 21.01.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/90235/150185da-ceb4-3aaa-d303-5983cc60bf63.png">


##書いたコード(間違った手法なので真似しないでください)
用意した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>
```

これを実際のブラウザで確認すると

<img width="346" alt="スクリーンショット 2016-01-20 21.15.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/90235/6e78a239-25e8-8b7e-246a-931e88974a27.png">

こんな感じでリンクとリンクの間に余計なものが入ってしまいます
原因は<MenuItems>と<Link>がそれぞれ<a>タグを生成しているからです

```
<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;
}
```

<img width="348" alt="スクリーンショット 2016-01-20 21.21.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/90235/c6e9c59a-a4a5-4265-dd5c-768f12dd71b4.png">

できた（Active Userが二つあるのはただのミスです）