React项目实战|路由跳转踩坑

问题分析

问题现象：

• 实际跳转URL：/divider/ask/divider/ask-edit?id=56
• 期望跳转URL：divider/ask-edit?id=56

根本原因：

1. 相对路径问题：在 src/views/divider/ask/list/askTable.tsx 第86行，handleEdit 函数中使用了相对路径：

   const handleEdit = (id: string) => {
     navigate(`divider/ask-edit?id=${id}`)  // 这里缺少前导斜杠
   }
   

2. 当前页面路径：用户当前在 /divider/ask 页面

3. React Router 相对路径解析：当使用相对路径 divider/ask-edit 时，React Router 会基于当前路径 /divider/ask 进行解析：

   • 当前路径：/divider/ask
   • 相对路径：divider/ask-edit
   • 解析结果：/divider/ask + divider/ask-edit = /divider/ask/divider/ask-edit

4. 对比其他跳转：在同一个文件中，handleDetail 函数使用了绝对路径：

   const handleDetail = () => {
     navigate(`/divider/ask-detail`)  // 这里有前导斜杠，是绝对路径
   }
   

修复建议

方案1：使用绝对路径（推荐）

const handleEdit = (id: string) => {
  navigate(`/divider/ask-edit?id=${id}`)  // 添加前导斜杠
}

方案2：使用相对路径但正确计算

const handleEdit = (id: string) => {
  navigate(`../ask-edit?id=${id}`)  // 使用相对路径回到上级目录
}

方案3：使用相对路径但基于当前路由结构

const handleEdit = (id: string) => {
  navigate(`ask-edit?id=${id}`)  // 直接使用同级路径
}

推荐使用方案1，因为：

1. 绝对路径更清晰，不依赖当前页面位置
2. 与项目中其他跳转方式保持一致（如 handleDetail 和 handleSave 都使用绝对路径）
3. 避免因页面路径变化导致的潜在问题

这个问题是由于 React Router 的相对路径解析机制导致的，当使用相对路径时，路由会基于当前路径进行拼接，而不是基于根路径。