页面刷新

Question

我正在使用 React 开发一个产品网站，每次单击特定菜单时，它都会刷新我的整个页面，而不仅仅是渲染组件。

   export const Header = () => { return ( <header> <a href="/" className="logo"> <img src={Logo} alt="Logo" /> <span>Taskify</span> </a> <nav className="navigation"> <a href="/" className="link" >Home</a> <a href="/products" className="link">Products</a> <a href="/contact" className="link">Contact</a> </nav> </header> ) }

如何修复此问题，它会减慢我的应用程序速度

Answer 1

您使用的代码正在渲染原始锚标记，单击该标记时将向服务器发出页面请求并重新加载页面。

如果您使用 React-Router-DOM 来处理客户端路由和导航，则导入并使用

Link

组件。该组件拦截请求并更新客户端视图并避免重新加载页面。

import { Link } from 'react-router-dom';

export const Header = () => {
  return (
    <header>
      <Link to="/" className="logo">
        <img src={Logo} alt="Logo" />
        <span>Taskify</span>
      </Link>
      <nav className="navigation">
        <Link to="/" className="link" >Home</Link>
        <Link to="/products" className="link">Products</Link>
        <Link to="/contact" className="link">Contact</Link>
      </nav>
    </header>
  );
}