javascript - NextJs Singleton Router 实例与 useRouter() 有什么区别？

Question

我在我的应用程序中使用 NextJS。在那，对于路由，我们使用以下内容：

import React from "react";
import {useRouter} from "next/router";

const IndexPage: React.FC = (props) => {
  const router = useRouter();

  useEffect(() => {
    router.replace('/home');
  }, []);

  return null;
};

这甚至是文档建议遵循的。他们利用 useRouter 钩子来接入路由器实例并用它做一些事情。

我一直在使用上述方法的替代方法。有一个单例路由器实例，它是 next/router 文件的默认导出。它允许我在不使用钩子进入路由器实例的情况下进行路由。

import React from "react";
import Router from "next/router";

const IndexPage: React.FC = (props) => {

  useEffect(() => {
    Router.replace('/home');
  }, []);

  return null;
};

我更喜欢第二种方法。但是，我在 NextJs 网站上没有看到这方面的文档。不确定这是否是进行路由的正确方法。我想知道这两种方法之间有什么区别，第二种方法将来会导致任何问题。

标签： javascriptreactjsnext.jsnext-router