HaneCa

material-ui (1.0.0-alpha.21)でListの各アイテムに内部リンクを張る場合の方法です。ググると次のようにListItemにcontainerElementというattributeを追加して、その値にLinkを設定するようにすれば良いと書かれた記事が多く引っかかります。

import List, { ListItem } from 'material-ui';
import { Link } from 'react-redux-dom';

<List>
<ListItem containerElement={`<Link to=${path}>`}>title</ListItem>
</List>

しかし、私が利用しているmaterial-uiでは、”unknown props ‘containerElement'”というエラーが出て、適切にリンクを張れませんでした。

解決方法として、次のようにLinkではなく、NavLinkを利用して、ListItemを囲うようにすれば良いことがわかりました。

import List, { ListItem } from 'material-ui';
import { NavLink } from 'react-redux-dom';

<List>
<NavLink to={path} style={{textDecoration: 'none', color: 'unset'}}><ListItem>title</ListItem></NavLink>
</List>

参考サイト

• stackoverflow