关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查

前言

最近使用React开发微信H5搜索框自动聚焦功能，发现路由跳转页面后无法自动聚焦。尝试了各种方法均不生效…后来发型是异步加载组件问题，个人估计是微信浏览器在异步组件加载完成后导致节点失焦。

尝试过的解决方法

• input 属性 autofocus —— 不生效
• ref保存组件处罚 ref.curren.focus() —— 不生效

解决方案

完整查看了路由注册引入组件的方式，个人认为是异步加载组件的原因。尝试修改为同步引入组件。yes!成功。具体原因需深入调查，先记录以下踩坑

• 原路由注册方式 (异步，无法自动聚焦)

{
    path: "/search",
    exact: true,
    component: loadable(() => import('./pages/search')),
    title: '搜索',
 }

• 修改后路由注册方式(同步，完成聚焦)

import SearchPage from './pages/search'
{
    path: "/search?",
    exact: true,
    component: SearchPage,
    title: '搜索'
  }