React中使用Swup报TypeError: Cannot set property 'responseURL' of null如何解决

• 实例化时机错误：你当前在组件作用域外部直接执行new Swup()，此时组件还未挂载到DOM树，id为swup的目标节点不存在，同时Swup初始化需要读取浏览器history等全局上下文，过早调用会导致内部属性赋值失败，触发Cannot set property 'responseURL' of null报错。
• Swup默认适配多页(MPA)场景，未做适配直接在React单页(SPA)项目中使用，也会和React的渲染逻辑产生冲突。

将Swup的实例化逻辑放到组件挂载完成的生命周期钩子中，同时添加卸载时的销毁逻辑避免内存泄漏，修改后的代码如下：

import Swup from 'swup';
import { useEffect } from 'react';

export default function TestingComponent(){
  useEffect(() => {
    // 组件挂载完成、DOM节点渲染后再初始化Swup
    const swup = new Swup();
    // 组件卸载时销毁实例，清理事件绑定
    return () => swup.destroy();
  }, []);

  return(
    <div>
      <main id="swup" className="transition-fade">
        <div className="container">
          This component created for test swup js
        </div>
      </main>
    </div>
  );
}

• 若你的项目为React SPA且使用了React Router等路由库，推荐使用Swup官方适配的React版本插件，避免和路由跳转逻辑冲突
• 请确保已全局引入Swup对应的过渡CSS样式，否则转场效果不会生效
• 若项目中存在不需要Swup接管的跳转链接，需要提前配置Swup的链路忽略规则

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