如何模拟或手动启动NextJS-TopLoader组件

Question

当使用

<Link />

组件更改路线时，我使用 NextJs-TopLoader 来实现顶部加载栏动画（它有效），但是当我使用

router.push('/somewhere')

功能时，它不起作用。

我已经查看了 NextTopLoader 对象中的 props。
我找到了

NextTopLoader.call()

和

NextTopLoader.caller

但它的文档说不是它 我找不到其他东西。

下面是您可以使用的代码测试运行代码示例：

export default function LoginPage() {
    const router = useRouter();
    const [user, setUser] = useState<userLoginData>({
        email: '',
        password: ''
    });
    const [isLoading, setIsLoading] = useState(false);

    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {

        event.preventDefault();
        setIsLoading(true);

        try {
            // API call
            const response = await axios.post('/api/login', user);

            if (response.status !== 200) {
                toast.error('Login unsuccessful. Please try again!');
                setIsLoading(false);
                return;
            }
            console.log('Login successful:', response.data);
            // Handle successful login here
            toast.success('Login successful!');
            // NextTopLoader.caller();
            router.push('/dashboard');
        } catch (error) {
            toast.error('Login failed!');
            console.log('Login failed!:', (error as Error).message);
            setIsLoading(false);
        }
    };

Answer 1

要在使用 router.push 时使 NextJs-TopLoader 具有动画效果，您需要手动启动并完成加载栏。该组件不会自动跟踪router.push发起的导航事件，所以需要在handleSubmit中自己触发。

以下是更新代码以实现此目的的方法：

首先，确保导入 NextTopLoader。 然后，创建一个引用来控制NextTopLoader并围绕router.push手动启动和停止它。 这是一个例子：

import NextTopLoader from 'nextjs-toploader';
import { useRouter } from 'next/router';
import { useRef, useState } from 'react';
import axios from 'axios';
import toast from 'react-toastify';

export default function LoginPage() {
    const router = useRouter();
    const loaderRef = useRef(null); 
    const [user, setUser] = useState({
        email: '',
        password: ''
    });
    const [isLoading, setIsLoading] = useState(false);

    const handleSubmit = async (event) => {
        event.preventDefault();
        setIsLoading(true);
        
        
        loaderRef.current?.continuousStart();

        try {
            // API call
            const response = await axios.post('/api/login', user);

            if (response.status !== 200) {
                toast.error('Login unsuccessful. Please try again!');
                setIsLoading(false);
                loaderRef.current?.complete(); // Stop loader if failed
                return;
            }
            console.log('Login successful:', response.data);
            toast.success('Login successful!');

            
            router.push('/dashboard').then(() => {
                loaderRef.current?.complete();
            });
        } catch (error) {
            toast.error('Login failed!');
            console.log('Login failed!:', error.message);
            setIsLoading(false);
            loaderRef.current?.complete(); // Stop loader on error
        }
    };

    return (
        <>
            <NextTopLoader ref={loaderRef} />
            <form onSubmit={handleSubmit}>
                {/* form inputs for email and password */}
                <button type="submit" disabled={isLoading}>Login</button>
            </form>
        </>
    );
}