NextJS链接调用函数和重定向，而不是路由

Question

我正在尝试在我的NextJS应用程序中创建一个链接，该链接调用一个API端点来注销用户并结束他们的会话，但是我找不到正确的模式来完成此操作。理想情况下，我希望用户能够通过访问/app/logout/来做到这一点。目前，我正在使用带有onClick的NextJS链接，该API阻止默认行为并触发API，但目前它正在查看onClick并继续路由器，将用户引导到404，因为/app/logout不存在。有没有更好的方法来解决这个问题？

下面是我的代码：

import Link from 'next/link';
import { useRouter } from 'next/router'

const signOut = (e) => {
        const router = useRouter()
        e.preventDefault();
        axios.get('/api/auth/logout/')
        .then(() => router.push('/'))
        .catch((err) => {
            console.log(err)
            console.log(err.request)
            console.log(err.message)
        })
    }

const Links = () => (
    <ul className="nav-links inline-flex justify-center">
        <li className="mx-5">
            <Link href="/app/feed/"><a>Feed</a></Link>
        </li>
        <li className="mx-5">
            <Link href="/app/profile/"><a>Profile</a></Link>
        </li>
        <li className="mx-5">
            <Link href="/app/logout/" onClick={ signOut }><a>Log Out</a></Link>
        </li>
    </ul>
)

export default Links;

后端Express.js服务器路由：

const express = require('express');
const router = express.Router();

/*      /api/auth/logout/      */
router.route('/logout/')
    .get((req, res) => {
        console.log('/api/auth/logout/ CALLED')
        req.logout();
        req.session.destroy();
        res.redirect('/');
    });

Answer 1

最近遇到了同样的问题。我发现这在不使用Link的情况下是很简单的。

import axios from "axios";
import { useRouter } from 'next/router';

export const LogoutButton = () => {

    const router = useRouter();
    
    const handleLogout = async () => {
        localStorage.clear();
        await axios.post("/api/user/logout");
        router.push("/");
    };

    return (
        <button onClick={handleLogout}><u>Logout</u></button>
    );
};