React v17+react-router-dom v6项目中链接无法点击求助

针对你遇到的问题，下面是几个排查和解决方向：

1. 修正useEffect的依赖与执行逻辑 #

无限循环渲染或频繁重绘会导致UI响应异常，先检查你的useEffect依赖数组是否正确：

• 如果是仅在组件挂载时获取一次数据，确保依赖数组为空[]，避免重复触发请求和渲染。
• 数据加载完成后，如果使用了Bootstrap这类第三方UI库的交互组件（比如你的tab标签），需要重新初始化组件，因为React重绘可能会破坏原有的事件绑定。

示例代码：

import { useEffect, useState } from 'react';

const YourComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('/api/your-data');
        const result = await res.json();
        setData(result);
        // 数据加载完成后重新初始化Bootstrap Tab
        const tabElement = document.getElementById('pills-home-tab');
        if (tabElement) {
          new window.bootstrap.Tab(tabElement);
        }
      } catch (err) {
        console.error('数据获取失败:', err);
      }
    };

    fetchData();
  }, []); // 空依赖确保仅挂载时执行

  // 组件渲染逻辑...
};

2. 检查是否有元素遮挡链接 #

数据加载过程中如果有loading遮罩、弹窗或其他绝对定位元素，可能会覆盖在导航链接上方，导致点击事件无法触发：

• 打开浏览器开发者工具（F12），选中链接元素，查看Elements面板中的层级（z-index），确认没有其他元素遮挡。
• 确保loading状态的逻辑正确，数据加载完成后及时隐藏遮罩组件。

3. 清理冗余的路由配置 #

react-router-dom v6中<Route>组件不再需要exact属性，因为v6默认采用精确匹配规则，冗余的exact不会导致问题，但建议移除以保持代码规范：

<Routes>
  <Route path="/" element={<HomeFour />} />
  <Route path="/articles/:page" element={<Article />} />
</Routes>

4. 确认锚点链接的正确性 #

你的示例链接是Bootstrap的tab切换，确保href="#pills-home"对应的目标元素id="pills-home"存在于页面中，否则点击不会有响应，也可能间接导致交互异常。

内容的提问来源于stack exchange，提问作者Seydinan Oumar Fadiga