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;
##やりたいこと
再現したいのはこのドロップダウンのリンクです
リンクをクリックするとシングルページ内でルーティングされます。
##書いたコード(間違った手法なので真似しないでください)
用意した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;
}
できた(Active Userが二つあるのはただのミスです)