相关疑难解决方法(0)

app当我使用以下简单组件时，它会在 Next.js 的目录中抛出以下错误useState：

您正在导入需要 useState 的组件。它仅在客户端组件中工作，但其父组件都没有标记为“使用客户端”，因此默认情况下它们是服务器组件。

import { useState } from "react";

export default function Card() {
  const [state, setState] = useState("");

  return <></>;
}

我正在使用 Next.js 13 中的实验app文件夹，它们已替换next/router为next/navigation，因此我useRouter相应地导入了挂钩。pathname我在路由器中没有看到该属性，该属性确实存在于next/router的路由器中。

类型“AppRouterInstance”上不存在属性“路径名”

我的用例是突出显示用户当前所在的导航栏中的链接。这是我尝试过的：

import Link from "next/link";
import { useRouter } from 'next/navigation';


const StyledNavLink: React.FC<NavLinkProps> = ({ to, children }) => {
  const router = useRouter();
  ...
  return (
    <Link href={to} className={getNavLinkClass({isActive: router.pathname === to})}>
      {children}
    </Link>
  );
};

我可以做些什么来获取当前路径名或其他东西来将我的类添加到活动链接中吗？

我在获取动态路由中的参数时遇到问题。我在阅读时不断收到错误：

类型错误：无法解构“router.query”的属性“themenID”，因为它未定义。

另外，我不能使用next/router但必须集成路由器next/navigation。但这个没有查询属性。我使用 Next.js 版本 13

该路径的名称如下：http://localhost:3000/MainThema/2。

应用程序/MainThema/[themenID]/page.js：

"use client";
import { useRouter } from "next/navigation";
import React from "react";

export default function MainThema() {
  const router = useRouter();
  console.log(router);

  const { themenID } = router.query;

  return <div>MainThema </div>;
}