Question

这是我在React组件中的html代码：

<a className="nav-link" href="#" onClick={this.handleExit}>
     <img
         src={require("../data/btn-ex.png")}
         style={{ width: "70px" }}
         alt="btn"
     />
</a>

这是我使用注销的功能：

handleExit = e => {
    e.preventDefault();
    if (window.confirm("برای خروج اطمینان دارید؟")) {
      this.props.history.replace("/logout");
    }
};

但这不起作用

const require = () => 'https://api.adorable.io/avatars/285/abott@adorable.png'

class App extends React.Component {
  handleExit = e => {
    e.preventDefault();
    if (window.confirm("برای خروج اطمینان دارید؟")) {
      this.props.history.replace("/logout");
    }
  };

  render () {
    return (
      <a className="nav-link" href="#" onClick={this.handleExit}>
        <img src={require("../data/btn-ex.png")} style={{
            width: "70px"
          }} alt="btn"/>
      </a>
    )  
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 1

我认为您应该将withRouter与React组件一起使用

 import React, { PureComponent } from 'react';
   import { withRouter } from 'react-router-dom';

        class YourReactComponent extends PureComponent {

         handleExit = e => {
        e.preventDefault();
        if (window.confirm("برای خروج اطمینان دارید؟")) {
          this.props.history.replace("/logout");
        }
    };

          render() {


            return(
    <a className="nav-link" href="#" onClick={this.handleExit}>
         <img
             src={require("../data/btn-ex.png")}
             style={{ width: "70px" }}
             alt="btn"
         />
    </a>

            )

          }

        }

        export default withRouter(YourReactComponent);

Answer 2

这很好用

    import React, { Component } from "react";
    import { Link } from "react-router-dom";

    class Navbar extends Component {
      render() {
        return (
    ....
   <Link className="nav-link" to="/dashboard/logout">
         <img
               src={require("../data/btn-ex.png")}
               style={{ width: "70px" }}
               alt="btn"
         />
   </Link>

    ...
        );
      }
    }
    export default Navbar;

TypeError：无法读取React JS中未定义的属性“替换”

2 个答案: