如何同时处理 Reactjs Link 和 onclick 事件？

Question

您好，我遇到了 React-router Link 组件的问题。我正在使用 Link to function 和 onClick 事件处理程序。像这样：

  logout = (e) => {
    e.preventDefault();
    auth.logout();
  }

    <Link to="/" onClick={this.logout}>Sing Out</Link>

事件处理程序工作，但我没有被重定向。我做错了什么？

Answer 1

方法#1；

尝试删除 event preventDefault()

logout = (e) => {
   // e.preventDefault(); => You don't need this
   auth.logout();
}

<Link to="/" onClick={this.logout}>Sing Out</Link>

方法#2

logout = (e) => {
  auth.logout();
  this.props.history.push('/');
}

<span onClick={this.logout}>Sing Out</span>

对于方法 2，如果这是主要的 Router 组件，react router 将注入historyprop，但如果这是路由器组件内的组件，则您必须将其包装在这样的高阶组件中

在包含包的顶部

import { withRouter } from 'react-router'

在您导出组件的底部

export default withRouter(YourComponentName)

参考路由器文档