React使用hookrouter报invalid hook call错误，求解决方案

核心问题定位 #

你当前的错误由两个可排查的点触发：

1. 只安装了hookrouter的TypeScript类型声明包@types/hookrouter，没有安装hookrouter核心运行依赖，运行时无法正确识别Hook调用上下文
2. 组件渲染阶段直接执行alert副作用操作，不符合React渲染逻辑要求，也可能触发运行时异常

具体修复方案 #

• 第一步：安装hookrouter核心依赖
  在项目根目录终端执行命令：

npm install hookrouter
# 若使用yarn则执行
# yarn add hookrouter

• 第二步：修正404处理逻辑，将副作用操作移到effect钩子中
  修改后的App.js代码如下：

import "./App.css";
import { useEffect } from "react";
import { navigate, useRoutes } from "hookrouter";

const routes = {
  "/": () => <h1>home</h1>,
  "/news": () => <h1>news</h1>,
};

function App() {
  const page = useRoutes(routes);
  // 路由不匹配时的提示放到effect中执行，避免渲染阶段触发副作用
  useEffect(() => {
    if (!page) {
      alert("not found");
    }
  }, [page]);
  return <div>{page || <h1>404 页面不存在</h1>}</div>;
}

export default App;

• 第三步：版本兼容问题处理
  如果完成以上两步后仍报错，是因为hookrouter已停止维护，不兼容React17及以上版本，可选择两种方案：
  • 降级React版本到16.8~16.14区间，适配hookrouter的运行要求
  • 替换为官方维护的React Router v6，其内置Hook式路由写法，稳定性和功能完整性更优

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