Question

当我点击链接路由器链接工作完美但我怎么能访问路由器链接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, Link } from "react-router-dom";

class App extends Component {
  render() {
    return <div className="App">
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
            </ul>

            <hr />

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

export default App;

Answer 1

在onmouseover上改变历史状态似乎不是一个好主意。

无论如何，请在下面的onmouseeenter中调用您的方案：

this.props.history.push(newUrl);

添加到路线的组件将具有历史记录作为道具。例如：示例组件下面将包含历史作为道具

<Route exact path="/" component={Example} />

未添加到路线主要是儿童组件的其他组件没有作为道具的历史记录。要访问react-router历史记录，我们在项目中使用 @withRouter 装饰器。如果不使用装饰器，则有一个选项可用。要使用装饰器，请添加＆＃34; stage-3＆＃34;你项目中的巴贝尔。

更新

import { withRouter } from "react-router";

@withRouter
class App extends Component {
...
}

将history添加到道具中。现在在组件使用中：this.props.history.push(newUrl);

我可以在react js中更改路由onmouseenter事件吗？

1 个答案: