HaneCa

独り立ちへ向けた長い道

material-uiでのListItemへのLinkについて

投稿日: 2017年8月31日 最終更新日: 2020年8月10日

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>

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください