React中点击按钮跳转新页面失败，a标签、useHistory等方法均无效如何解决

问题原因排查与修复方案 #

1. <a>标签跳转无效的原因 #

React 单页应用支持用<a>标签跳转，但仅适用于外部链接、需要强制刷新页面的场景，你写的<a href="/bookingSlot.js">属于错误用法：

• 前端路由对应的是逻辑路径，不是真实存在的.js物理文件路径，直接写文件路径会404
• 用<a>跳内部路由会触发整页刷新，丢失单页应用的缓存优势，体验差，不推荐。如果要用来跳内部路由，需要阻止默认跳转行为，结合路由API实现无刷新跳转。

2. useHistory 报错的核心原因 #

useHistory是react-router-dom v5版本的专属API，如果你项目安装的是v6版本，这个API已经被正式移除，这是最常见的报错原因。

3. 修复步骤 #

情况1：项目使用 react-router-dom v6（当前主流版本）

• 替换路由API：将useHistory替换为v6提供的useNavigate
  修改代码如下：

  // 替换引入
  import { useNavigate } from "react-router-dom";
  
  // 替换逻辑代码
  const navigate = useNavigate();
  function handleClick() {
    navigate("/bookingSlot");
  }
  

• 必做基础校验：
  • 你的整个应用必须在入口文件（一般是index.js）中用<BrowserRouter>/<HashRouter>包裹，所有路由相关的Hook才能正常使用，示例：

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import { BrowserRouter } from 'react-router-dom';
    import App from './App';
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
    );
    

  • 必须提前在路由配置中注册/bookingSlot路径对应的组件，示例：

    import { Routes, Route } from 'react-router-dom';
    import BookingSlot from './pages/BookingSlot';
    import ReservedListView from './components/ReservedListView';
    
    function App() {
      return (
        <Routes>
          <Route path="/" element={<ReservedListView />} />
          <Route path="/bookingSlot" element={<BookingSlot />} />
        </Routes>
      );
    }
    

情况2：项目确实使用 react-router-dom v5

• 首先确认应用已经用<BrowserRouter>包裹
• 确认路由表中已注册/bookingSlot对应的路由规则
• 检查是否有拼写错误，v5版本的useHistory不需要修改API，配置正确即可正常使用

4. 其他优化建议 #

• React中DOM的class属性要写为className，你代码中<table id="students" class="table">要改成<table id="students" className="table">，避免控制台警告
• 内部路由跳转更推荐直接使用Link组件，无需手动绑定事件，示例：

  import { Link } from 'react-router-dom';
  <Link to="/bookingSlot">点击跳转</Link>
  

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