javascript - 如何做到这一点，当您按下 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>
);
}

标签： javascriptreactjsreact-routerreact-router-v4

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