reactjs - ReactJS の IconButton に Routerlink を配置する方法

Question

ルーターリンクをreactjsボタンに配置するにはどうすればよいですか?

以下の2つを試しました.最初のものは色が変わりますが、2番目のものはページをリロードしているので好きではありません.

最初

<Link to="/settings">
    <IconButton color="inherit">
        <SettingsIcon />
    </IconButton>
</Link>

2番目

<IconButton color="inherit" href="/settings">
    <SettingsIcon />
 </IconButton>

Answer 1

@BeHappy のソリューションは優れていますが、コンポジションを使用してこれを実装できます。フックを使用する必要はありません。

import React from 'react';
import { Link } from 'react-router-dom';
import { IconButton } from '@material-ui/core';
import SettingsIcon from '@material-ui/icons/Settings';

export default function Component() {
  return (
    <IconButton component={Link} to="/setting">
      <SettingsIcon />
    </IconButton>
  );
}