4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-01-20

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が二つあるのはただのミスです)

4
4
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?