Next.js路由异常：进入Products页面后无法跳转至其他页面

问题现象 #

进入Products页面后，点击侧边导航栏的其他页面链接无法切换路由，控制台无报错，但Products页面自身功能正常。

关键问题诊断 #

1. Hook误用：将Redux的useSelector误写为导入的自定义useSelection，导致状态获取逻辑异常，引发组件渲染流程混乱，间接阻塞路由更新。
2. 冗余参数与依赖：useCategories函数接收未使用的参数，且依赖数组存在重复项，导致不必要的组件重渲染。
3. 潜在事件冲突：自定义useSelection Hook若包含未清理的全局事件监听，可能阻止导航链接的点击事件冒泡。

修复步骤 #

1. 修正Hook误用 #

将错误的useSelection调用改为useSelector：

// 错误写法
const { categoryStatus } = useSelection((state) => state.category)

// 正确写法
const { categoryStatus } = useSelector((state) => state.category)

2. 清理冗余参数与依赖 #

• 修改useCategories的调用，移除未使用的参数：

// 错误写法
const categories = useCategories(page, rowsPerPage);

// 正确写法
const categories = useCategories();

• 修正useCategories的依赖数组，移除重复的user项：

// 错误写法
}, [categoriesState, user, user]);

// 正确写法
}, [categoriesState, user]);

3. 排查自定义useSelection Hook #

检查src/hooks/use-selection.ts的实现：

• 确保没有添加未清理的全局事件监听（如document.addEventListener未在useEffect清理函数中移除）。
• 确认逻辑不会意外阻止事件冒泡或干扰路由链接的点击事件。

4. 临时验证表格影响（可选） #

若上述修复后问题仍存在，临时注释表格渲染代码：

// {categories && Array.isArray(categories) && categories.length > 0 && <MaterialReactTable table={table} />}

测试导航是否恢复正常，以此确认是否为表格组件的事件冲突。若恢复，检查表格配置项（如enableRowSelection、onRowClick）是否存在阻止事件冒泡的逻辑。

修复后关键代码片段 #

const ProductsPage = () => {
  const dispatch = useDispatch();
  const { user } = useSelector((state) => state.auth);
  // 修复Hook调用
  const { categoryStatus } = useSelector((state) => state.category)

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  // 移除未使用参数
  const categories = useCategories();
  const categoryIds = useCategoryIds(categories);
  const categoriesSelection = useSelection(categoryIds);
  // 其余代码保持不变
};

// 修复useCategories依赖数组
const useCategories = () => {
  const categoriesState = useSelector((state) => state.category.categories);
  const { user } = useSelector((state) => state.auth);

  return useMemo(() => {
    if (user.isVendor) {
      const filteredCategories = categoriesState.filter((category) =>
        category.item._id === user.vendorDetails.item
      );
      return filteredCategories;
    }
    return categoriesState;
  }, [categoriesState, user]);
};

验证方法 #

完成修改后重新运行项目：

1. 进入Products页面，点击侧边导航的其他页面链接，确认路由正常切换。
2. 检查Products页面的表格渲染、Modal操作等功能是否正常。

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