使用react-router遇TypeError: Cannot read properties of null (reading 'useState')错误求助

我在使用React Router时触发了错误：TypeError: Cannot read properties of null (reading 'useState')，尝试多种方法后仍未解决，相关截图如下：

• 错误截图：
• Bootstrap导航栏截图：
• index.tsx代码截图：
• app.tsx代码截图：
• 调试截图：

常见原因及排查方向 #

• 钩子使用场景错误：useState是React钩子，必须在函数组件或自定义钩子的顶层调用，且组件必须处于React渲染上下文内。如果导航栏组件是通过非React方式（比如原生DOM API）插入页面，会导致钩子无法获取React上下文而报错。
• 版本不兼容：确认React与React Router版本匹配，React Router v6要求React 16.8及以上版本支持钩子，若React版本过低会引发此类错误。
• 组件渲染顺序问题：如果组件在React初始化完成前就被渲染，或者被包裹在非React的渲染逻辑中，会导致useState依赖的内部上下文为null。
• 导入错误：检查是否正确导入useState，确保代码中是import { useState } from 'react'，而非错误的导入路径或拼写。

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