点击与React链接

如何解决点击与React链接

我希望当用户单击Link时直接执行注销功能，而无需单击注销button时不执行（2到1动作）

我有此链接和以下路线：

<Link to="/logout">logout</Link>
...
<Route path="/logout">
    <logout />
</Route>

注销组件：我真的需要一个组件来调用“一行”功能吗？

import React,{ Component } from 'react'
import { logout } from './../../services/auth.service';
import { Redirect } from 'react-router-dom';

export default class logout extends Component {
    state = {
        navigate: false
    }

    handlelogout() {
        logout();
        this.setState({
            navigate: true
        })
    }
    render() {
        const { navigate } = this.state;

        if (navigate) {
            return <Redirect to="/login" push={true} />;
        }
        return <button onClick={() => this.handlelogout()}>logoUT</button>
    }
}

我将所有login（），register（），getData（），postData（）逻辑放入服务中，甚至将logout（）放入auth.service.js中：

export function logout() {
  localStorage.removeItem('user');
}

您知道我该怎么做“不单击按钮”注销快捷方式吗？

谢谢您的帮助。

[编辑]

似乎可以单击以下链接来调用函数：

<Link to="/logout" onClick={() => this.logout()}>logout</Link>

为什么React router documentation中没有提及此内容？

此解决方案不合适，因为我仍然不想使用注销组件...