javascript - 在 React 组件之外使用 NextRouter

Question

我有一个自定义钩子(Hook)，可以检查您是否已登录，如果未登录，则将您重定向到登录页面。这是我的钩子(Hook)的伪实现，假设您没有登录:

import { useRouter } from 'next/router';

export default function useAuthentication() {

  if (!AuthenticationStore.isLoggedIn()) {
    const router = useRouter();
    router.push('/login'); 
  }
}

但是当我使用这个钩子(Hook)时，我得到以下错误:

Error: No router instance found. you should only use "next/router" inside the client side of your app. https://err.sh/vercel/next.js/no-router-instance

我检查了错误中的链接，但这并没有真正的帮助，因为它只是告诉我移动 push对我的渲染函数的声明。
我也试过这个:

// My functional component
export default function SomeComponent() {

  const router = useRouter();
  useAuthentication(router);

  return <>...</>
}

// My custom hook
export default function useAuthentication(router) {

  if (!AuthenticationStore.isLoggedIn()) {
    router.push('/login');
  }
}

但这只会导致相同的错误。
有没有办法允许在 Next.js 中的 React 组件之外进行路由？

Answer 1

发生错误是因为 router.push在页面首次加载的 SSR 期间在服务器上被调用。一种可能的解决方法是扩展您的自定义 Hook 以调用 router.push在 useEffect 内的回调，确保 Action 只发生在客户端。

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function useAuthentication() {
    const router = useRouter();

    useEffect(() => {
        if (!AuthenticationStore.isLoggedIn()) {
            router.push('/login'); 
        }
    }, []);
}

然后在您的组件中使用它:

import useAuthentication from '../hooks/use-authentication' // Replace with your path to the hook

export default function SomeComponent() {
    useAuthentication();

    return <>...</>;
}