React Router 6返回页面后ReactQuill输入失焦问题求助

核心问题根源 #

这个问题本质是路由切换导致组件卸载/重新挂载，结合Prompt触发的父组件state更新，破坏了ReactQuill内部DOM与实例状态的同步，最终引发addRange(): The given range isn't in document警告和输入失焦。

关键注意事项 #

• 路由切换的生命周期影响：React Router切换路由时，页面a的ReactQuill会被完全卸载，切回时重新初始化。如果此时父组件因Prompt触发state更新，重新挂载的ReactQuill会接收新的value，但Quill内部的光标、选区状态已丢失，无法与DOM节点匹配，输入时就会失焦。
• Prompt的state更新时机冲突：导航到页面b时触发Prompt，此时页面a的组件已处于卸载流程中，此时更新父组件state会导致后续重新渲染的ReactQuill props变化，Quill初始化时无法正确关联当前DOM的选区范围，引发警告。
• ref绑定的可靠性问题：使用innerRef={(ref) => this.aboutUsEditor = ref}直接赋值的方式，在组件重新挂载时，ref赋值可能晚于Quill实例初始化，导致无法及时同步或控制实例状态，加剧DOM与实例的不一致。
• 受控模式的同步问题：ReactQuill处于受控模式（通过value绑定父组件state）时，父组件state的任何更新都会强制组件重新渲染。Prompt触发的state更新会让ReactQuill重复渲染，但Quill内部的光标状态未与外部state绑定，导致输入时光标丢失。

可行优化方向 #

• 调整Prompt的state更新时机：避免在路由切换过程中更新与ReactQuill相关的state，或延迟到页面a完全重新挂载后再同步状态。
• 保存与恢复Quill状态：在页面a组件卸载前，保存Quill的光标位置、内容状态，重新挂载时恢复这些状态，避免丢失。
• 优化ref绑定：在class组件中，通过componentDidMount/componentDidUpdate处理ref，确保Quill实例初始化后能正确获取并控制。
• 尝试非受控模式：如果业务允许，改用defaultValue替代value，减少外部state对ReactQuill渲染的干扰。
• 升级依赖：当前使用的react-quill 1.3.5版本较旧，升级到新版本可能修复路由切换时的DOM同步问题。

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