React中如何通过onmouseenter事件修改路由？点击Link正常，需hover跳转

嘿，这个需求其实很好实现，咱们结合React Router的路由跳转API和鼠标事件就能搞定，还能顺便处理菜单激活的样式问题。下面给你分情况说具体方案：

因为你的代码是基于类组件的，咱们直接在现有结构上修改：

首先，我们可以用NavLink代替原生的Link（它自带路由激活状态的样式支持），然后给导航项添加onMouseEnter事件，触发路由跳转。

import React, { Component } from 'react';
import './App.css';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Example from './Example.js';
import About from "./About.js";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";

class App extends Component {
  // 处理鼠标悬停跳转的方法
  handleHover = (targetPath) => {
    // 通过props获取history对象，调用push实现路由跳转
    this.props.history.push(targetPath);
  }

  render() {
    return (
      <Router>
        <div className="App">
          {/* 导航菜单区域 */}
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="container-fluid">
              {/* 使用NavLink，自动支持激活样式，同时绑定悬停事件 */}
              <NavLink 
                className="nav-link" 
                to="/" 
                onMouseEnter={() => this.handleHover('/')}
                exact // 精确匹配根路径，避免子路由也激活Home
              >
                Home
              </NavLink>
              <NavLink 
                className="nav-link" 
                to="/about" 
                onMouseEnter={() => this.handleHover('/about')}
              >
                About
              </NavLink>
            </div>
          </nav>

          {/* 路由配置 */}
          <Route path="/" component={Example} exact />
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
  }
}

export default App;

NavLink会自动给当前匹配的路由链接添加active类名，你可以在App.css里设置激活状态的样式：

.nav-link.active {
  color: #0d6efd;
  font-weight: bold;
  border-bottom: 2px solid #0d6efd;
}

/* 同时可以给悬停状态单独加样式，提前反馈 */
.nav-link:hover {
  color: #0a58ca;
}

如果担心用户鼠标不小心划过就触发跳转，我们可以给跳转加个延迟，同时在鼠标离开时取消跳转：

class App extends Component {
  hoverTimeout = null;

  handleHover = (targetPath) => {
    // 300ms后再跳转，给用户反应时间
    this.hoverTimeout = setTimeout(() => {
      this.props.history.push(targetPath);
    }, 300);
  }

  handleMouseLeave = () => {
    // 鼠标离开时清除定时器，取消跳转
    clearTimeout(this.hoverTimeout);
  }

  render() {
    return (
      <Router>
        <div className="App">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="container-fluid">
              <NavLink 
                className="nav-link" 
                to="/" 
                onMouseEnter={() => this.handleHover('/')}
                onMouseLeave={this.handleMouseLeave}
                exact
              >
                Home
              </NavLink>
              <NavLink 
                className="nav-link" 
                to="/about" 
                onMouseEnter={() => this.handleHover('/about')}
                onMouseLeave={this.handleMouseLeave}
              >
                About
              </NavLink>
            </div>
          </nav>

          <Route path="/" component={Example} exact />
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
  }
}

如果之后你要迁移到函数组件，可以用useNavigate钩子来实现：

import React, { useRef } from 'react';
import './App.css';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Example from './Example.js';
import About from "./About.js";
import { BrowserRouter as Router, Route, NavLink, useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();
  const hoverTimeoutRef = useRef(null);

  const handleHover = (targetPath) => {
    hoverTimeoutRef.current = setTimeout(() => {
      navigate(targetPath);
    }, 300);
  }

  const handleMouseLeave = () => {
    clearTimeout(hoverTimeoutRef.current);
  }

  return (
    <Router>
      <div className="App">
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container-fluid">
            <NavLink 
              className="nav-link" 
              to="/" 
              onMouseEnter={() => handleHover('/')}
              onMouseLeave={handleMouseLeave}
              exact
            >
              Home
            </NavLink>
            <NavLink 
              className="nav-link" 
              to="/about" 
              onMouseEnter={() => handleHover('/about')}
              onMouseLeave={handleMouseLeave}
            >
              About
            </NavLink>
          </div>
        </nav>

        <Route path="/" element={<Example />} exact />
        <Route path="/about" element={<About />} />
      </div>
    </Router>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者MD.ALIMUL Alrazy