Как поместить Routerlink в IconButton в ReactJS

Question

Как я могу поместить ссылку на маршрутизатор в кнопку reactjs?

Я пробовал эти два ниже: первый меняет цвет, а второй, мне это не нравится, так как он перезагружает страницу .

ПЕРВЫЙ

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

ВТОРОЙ

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

Answer 1

import React from "react";
import { useHistory } from "react-router-dom";

export default function Component() {
    const history = useHistory();

    return (
        <IconButton color="inherit" onClick={() => history.push("/setting")}>
            <SettingsIcon />
        </IconButton>
    );
}