Question

你好，我对React-router Link组件有疑问。我正在使用Link功能和onClick事件处理程序。像这样：

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

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

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

Answer 1

根据您的情况，您将需要使用普通的button而不是Link

然后单击按钮的onClick调用此功能

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

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

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

  }

如果您的组件中没有history道具，请使用withRouter高阶组件并将其包裹起来。如果您的cmponent不是主路由器的直接子代，则会发生这种情况。

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

...your code


export default withRouter(YourComponentName);

Answer 2

方法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将注入history prop，但是，如果这是Router组件内部的组件，则必须将其包装在更高阶的组件中，例如这个

在顶部包含软件包的

import { withRouter } from 'react-router'

在导出组件的底部

export default withRouter(YourComponentName)