这是我在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>
答案 0 :(得分:0)
我认为您应该将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);
答案 1 :(得分:0)
这很好用
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;