Reactjs 如何一次对JS链接和onclick事件处理作出反应？

你好，我有问题的反应路由器链接组件。我正在使用函数链接和onClick事件处理程序。像这样：

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

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

logout=（e）=>{
e、 预防默认值（）；
auth.logout（）；
}
唱出

---

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

在您的情况下，您需要使用正常的

按钮，而不是
链接

然后单击按钮调用此函数

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

如果您正在与服务器通信，则可以使用承诺

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

  }

如果您的组件中没有获得
历史
道具，请使用
with router
高阶组件，并用它包装您的组件。如果您的组件不是主路由器的直接子级，则会发生这种情况

import {withRouter} from 'react-router-dom';

...your code


export default withRouter(YourComponentName);

方法#1

尝试删除
事件
preventDefault（）

在导出组件的底部

export default withRouter(YourComponentName)

供参考

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

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

import { withRouter } from 'react-router'

export default withRouter(YourComponentName)