next.js 为什么使用useRoute()时必须多次单击？

9rnv2umw 于 2023-08-04 发布在其他

关注(0)|答案(2)|浏览(108)

下面我有两个代码片段。第一个工作，但我希望该组件不采取任何参数。这里需要baseUrl。
阅读NextJS docs，他们建议如果可能的话使用<Link>，如果不可能，那么使用useRoute()。
我不知道如何在按钮中使用<Link>，所以我想我唯一的选择是useRoute()。
然而，当我这样做时（见最后一个代码片段），我必须点击按钮3-5次，而在第一个代码片段中只点击一次。
我做错了什么？

作品：

"use client";
import { useAuth, useLoginWithRedirect } from "@frontegg/nextjs";

export const ClientComponent = ({ baseUrl }: { baseUrl?: string }) => {
  const { isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();

  const logout = () => {
    window.location.href = `${baseUrl}/account/logout`;
  };

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <button onClick={() => logout()}>Click to logout</button>
        </div>
      ) : (
        <div>
          <button onClick={() => loginWithRedirect()}>Click me to login</button>
        </div>
      )}
    </div>
  );
};

字符串

不起作用：

"use client";
import { useAuth, useLoginWithRedirect } from "@frontegg/nextjs";
import { useRouter } from "next/navigation";

export const ClientComponent = () => {
  const { isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();
  const router = useRouter();

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <button onClick={() => router.push("/account/logout")}>
            Click to logout
          </button>
        </div>
      ) : (
        <div>
          <button onClick={() => loginWithRedirect()}>Click me to login</button>
        </div>
      )}
    </div>
  );
};

型

next.js

来源：https://stackoverflow.com/questions/76741017/why-do-i-have-to-click-many-times-when-using-useroute

2条答案

按热度按时间

rmbxnbpk1#

useRouter行为可能不适合nextjs中的这种情况，它启动了导航过程，但由于它是异步的，因此应该与useTransition挂钩一起使用，然而，由于Link更合适，并且没有人回答如何尝试使用Link，正如我之前提到的：

"use client";
    import { useAuth, useLoginWithRedirect } from "@frontegg/nextjs";
    import Link from "next/link";
    
    export const ClientComponent = () => {
      const { isAuthenticated } = useAuth();
      const loginWithRedirect = useLoginWithRedirect();
    
      return (
        <div>
          {isAuthenticated ? (
          <Link href={"/account/logout"}>
            <button>
             Click to logout
            </button>
           </Link>
          ) : (
            <div>
              <button onClick={() => loginWithRedirect()}>Click me to login</button>
            </div>
          )}
        </div>
      );
    };

字符串
如果出于某种原因，你讨厌使用Link，而想坚持使用useRouter，那么：

"use client";
    import { useAuth, useLoginWithRedirect } from "@frontegg/nextjs";
    import { useTransition } from "react";
    import { useRouter } from "next/navigation";
    
    export const ClientComponent = () => {
      const { isAuthenticated } = useAuth();
      const loginWithRedirect = useLoginWithRedirect();
      const router = useRouter();
      let [isPending, startTransition] = useTransition();
    
      return (
        <div>
          {isAuthenticated ? (
           <button onClick={()=> startTransition(()=> {
              router.push("/account/logout")
            })}
           >
            {isPending ? "logging out..." : "Click to logout"}
           </button>
          ) : (
            <div>
              <button onClick={() => loginWithRedirect()}>Click me to login</button>
            </div>
          )}
        </div>
      );
    };

型

赞(0）回复(0）举报 2023-08-04

j1dl9f462#

听起来路由器设置不正确或不在范围内，单击该元素不会触发导航。
然而，在window.location.href属性的情况下，这种方法绕过了对路由库的需求，并且独立于React路由设置，直接更改浏览器的位置，因此没有问题。

赞(0）回复(0）举报 2023-08-04