Как сделать так, чтобы при нажатии на значок png он доставлял вас к дому, который находится в '/' в NavLink, без перезагрузки страницы?

Question

Так вот мой код:

                   <div key="1" className="menu-item">
                    <NavLink to="/">

                        <span className="icon-home3" />&nbsp; Home
                    </NavLink>
                </div>

Кнопка «Домой» работает нормально, без перезагрузки страницы, но значок png заставляет страницу обновляться каждый раз. Почему это так и как мне это исправить?

Вот компонент изображения:

const Logo = () => {
return (
    <center style={{ marginTop: '4%' }}>
        <a
            href="/"
            className="logo"
            title="Home" >
            <img src="data:image/png;base64,..." alt="Logo" />
        </a>
    </center>
);
}

Answer 1

Вы забыли заменить элемент a на компонент NavLink. NavLink делает магию - перенаправляет без обновления.

const Logo = () => {
  return (
    <center style={{ marginTop: '4%' }}>
        <NavLink to="/"
            className="logo"
            title="Home" >
            <img src="data:image/png;base64,...." alt="Logo" />
        </NavLink>
    </center> 
  );
}