ReactアプリでMUIを使用していると、以下のようなエラーが発生することがあります。
"Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>."このエラーは、Reactがレンダリングする際に、HTMLの構造が正しくないことを示しています。このエラーは、通常、LinkコンポーネントがAタグで包まれている場合に発生します。つまり、ネストされたAタグはHTMLの仕様に反しています。
このエラーを回避するには、MUIを使用している場合でも、Linkコンポーネントを削除し、代わりにhref属性を直接リストアイテムのコンポーネントに設定する必要があります。これにより、Aタグのネストが防止され、エラーが回避されます。
以下は、実際にエラーが発生したMUIを使用したコードと、Linkコンポーネントを削除した修正したコードの例です。
エラーが起きたコード
<List>
{items.map(item => (
<React.Fragment key={item.id}>
<Link href={`/game/${item.id}`} passHref>
<ListItem button component="a">
<ListItemText
primary={
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
}}>
<Typography>{item.date}</Typography>
<Typography>{item.hoge}</Typography>
</Box>
}
/>
</ListItem>
</Link>
<Divider />
</React.Fragment>
))}
</List>
MUIのリストアイテムコンポーネントでは、通常、リンクを作成するためにLinkコンポーネントが使用されます。しかし、Linkコンポーネントは、内部的にAタグを使用するため、リストアイテムがAタグで包まれることがあります。この場合、Aタグがネストされてしまい、HTMLの仕様に反してしまい、上記のエラーが発生しました。
解決したコード
<List>
{items.map(item => (
<React.Fragment key={item.id}>
<ListItem button component="a" href={`/game/${item.id}`}>
<ListItemText
primary={
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
}}
>
<Typography variant="body1">{item.date}</Typography>
<Typography variant="body1">{item.hoge}</Typography>
</Box>
}
/>
</ListItem>
<Divider />
</React.Fragment>
))}
</List>
エラーを回避するためには、リストアイテムコンポーネントに直接href属性を設定しました。
これにより、Aタグのネストが回避され、エラーが解決しました。
関連記事
