Laravel+ReactJS部署Vercel后路由生成链接无法点击求解决方案

问题概述 #

• 使用{route('routines.index')}作为<Link>组件的href属性时，路径显示为预期的myproject/guide，但链接无法点击
• 硬编码路径/login的<Link>（带as="button"属性）可正常触发跳转

排查与解决步骤 #

1. 验证route函数的返回格式

   • 打印console.log(route('routines.index'))确认返回路径是否为带开头斜杠的绝对路径（如/myproject/guide）。缺少开头斜杠的相对路径可能导致路由解析异常，即使显示正确也无法触发跳转。
   • 如果返回的是相对路径，修改route函数或手动添加开头斜杠：href={'/' + route('routines.index')}

2. 检查Link组件的属性适配

   • 若使用的是Next.js的Link组件：
     • 旧版本中href为动态生成路径时，需配合as属性指定显示路径，尝试补充属性：

       <Link href={route('routines.index')} as={route('routines.index')}>Back</Link>
       

     • 若为Next.js 13+的App Router，需改用next/navigation中的Link组件，无需额外as属性：

       import { Link } from 'next/navigation';
       <Link href={route('routines.index')}>Back</Link>
       

   • 若使用React Router的Link组件，注意属性是to而非href，修正为：

     import { Link } from 'react-router-dom';
     <Link to={route('routines.index')}>Back</Link>
     

3. 排查路由配置匹配

   • 确认后端路由命名routines.index对应的前端路径myproject/guide已在前端路由（React Router/Next.js路由）中正确配置，避免路径存在但路由规则不匹配导致无法跳转。

4. 检查元素交互遮挡

   • 通过浏览器开发者工具的元素检查功能，确认<Link>组件没有被上层元素遮挡（如z-index层级问题），确保其可点击区域正常。

5. 验证route函数的可靠性

   • 如果route是自定义函数或第三方库提供，检查其是否正确解析路由命名，是否返回符合前端路由要求的路径格式，必要时替换为硬编码路径测试是否可跳转，排除函数本身的问题。

内容的提问来源于stack exchange，提问作者Muhammad Yuda Yudistira