前言

最近使用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: '搜索'}