react-router-dom的Link不跳转且报已定义未使用错误如何解决？

1. "Link is defined but never used" 报错问题 #

可能原因 #

• ESLint缓存未更新，开发服务的静态检查缓存了旧的代码校验结果
• 项目ESLint的no-unused-vars规则误判，部分配置下对JSX中使用的导入组件识别异常
• react-router-dom包安装异常，或者版本不兼容

解决步骤 #

• 先停止本地开发服务，删除项目下node_modules/.cache文件夹，重新执行npm start或yarn dev启动服务，绝大多数缓存导致的误报都会消失
• 如果重启后仍然报错，可以在Link导入行上方添加注释临时禁用当前行的未使用校验，验证是否是规则误判：

  // eslint-disable-next-line no-unused-vars
  import { Link } from 'react-router-dom';
  

• 执行npm list react-router-dom确认依赖安装正常，如果返回空或者报错，重新执行npm i react-router-dom安装依赖。

2. 点击Link URL变化但组件不渲染问题 #

可能原因 #

该问题和Link组件本身无关，是项目路由配置异常导致的

解决步骤 #

• 首先确认应用最外层已经用BrowserRouter/HashRouter组件包裹，示例：

  // index.js 入口文件
  import { BrowserRouter } from 'react-router-dom';
  ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
  

• 检查路由配置是否正确注册了/contact/:id对应的路径和组件：
  • 如果你用的是react-router-dom v6版本，确保所有路由放在<Routes>标签内，path和element属性配置正确：

    import { Routes, Route } from 'react-router-dom';
    import ContactDetail from './ContactDetail';
    
    function App() {
      return (
        <Routes>
          {/* 其他路由 */}
          <Route path="/contact/:id" element={<ContactDetail />} />
        </Routes>
      );
    }
    

  • 如果你用的是v5版本，确保路由顺序正确，精准路由放在通用路由上方，必要时添加exact属性：

    <Switch>
      <Route exact path="/contact/:id" component={ContactDetail} />
      {/* 其他通用路由放在后面 */}
    </Switch>
    

• 打开浏览器开发者工具的控制台面板，检查跳转后有没有组件报错，如果目标组件初始化抛出错误会导致渲染失败，不会有页面刷新效果。

内容的提问来源于stack exchange，提问作者Jian Ruiz Mangampo