How to Put Routerlink in IconButton in ReactJS

Question

How can i put the routerlink in reactjs button?

I tried these two below: the first one changes the color while the second one, i don't like it since it is reloading the page.

FIRST

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

SECOND

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

Answer 1

@BeHappy's solution is good, but you can implement this using composition. No need to use hook.

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>
  );
}

Answer 2

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>
    );
}