reactjs - 如何 Reactjs 一次链接到和 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，如果这是主路由器组件，react router 将注入(inject) history 属性，但如果这是路由器组件内的组件，那么您必须将其包装在更高的像这样的订单组件

在您包含包的顶部

import { withRouter } from 'react-router'

在您导出组件的底部

export default withRouter(YourComponentName)

供引用withRouter documentation