如何结合react-router使用带href属性的a元素实现无刷新路由跳转

a标签自带原生导航逻辑：点击时浏览器会默认读取href属性触发整页跳转，你的代码仅在点击时执行了navigation.push，但没有拦截这个默认行为，所以路由跳转逻辑执行完后，浏览器依然会触发原生跳转导致应用刷新、状态丢失。

拦截默认点击行为不会影响你需要的两个原生特性，这两个能力仅依赖href属性存在，和点击跳转的默认行为是独立的：

• 右键点击唤起菜单复制链接地址的功能正常保留
• 鼠标悬浮时浏览器左下角展示目标URL的交互正常保留

方案1：手动拦截默认事件 #

在onClick回调中接收事件对象，调用e.preventDefault()阻止a标签的原生跳转即可，修改后的完整代码：

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

const TestComp = () => {
  const navigation = useHistory();
  return (
    <a
      onClick={(e) => {
        e.preventDefault();
        navigation.push(`/test`);
      }}
      href={`/test`}>
      this is a link
    </a>
  );
};

export default TestComp;

方案2：使用React Router内置的Link组件 #

React Router 已经封装好了上述逻辑，直接使用Link组件即可，它最终会渲染为标准a标签，自带正确的href属性，同时默认拦截点击的原生跳转行为，调用路由方法做无刷新跳转，不需要手动绑定事件：

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

const TestComp = () => {
  return (
    <Link to="/test">
      this is a link
    </Link>
  );
};

export default TestComp;

内容的提问来源于stack exchange，提问作者Jim Peeters