Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

Laravel-5-boilerplateのviewをReact化する作業のメモ
react-bootstrapのドキュメント
react-routerのドキュメント

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

やりたいこと

再現したいのはこのドロップダウンのリンクです
リンクをクリックするとシングルページ内でルーティングされます。
スクリーンショット 2016-01-20 21.01.52.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>

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

スクリーンショット 2016-01-20 21.15.36.png

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

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

スクリーンショット 2016-01-20 21.21.28.png

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした