相关疑难解决方法(0)

使用import { useRouter } from "next/router";asimport { useRouter } from "next/navigation";会抛出“'{ pathname: string; query: { search: string; }; }' 类型的参数不可分配给 'string' 类型的参数。”

    const router = useRouter();
    const [searchInput, setSearchInput] = useState("");

    const search = (e) => {
                router.push({
                    pathname: '/search',
                    query: {
                        search: searchInput,
                    },
                })
    }

NextJS文档

Froms 文档：“组件在 Next.js 应用程序之外使用了 useRouter，或者在 Next.js 应用程序之外呈现。在对使用 useRouter 挂钩的组件进行单元测试时可能会发生这种情况，因为它们没有配置 Next.js 的上下文”。

我正在使用该目录构建 Next.js 13 项目/app。我有一个问题 - 在根布局中，我有一个永久的导航栏组件，该组件是从/components/Navbar.jsx. 基本上在 内部Navbar.jsx，我希望能够访问 url 中的 slug 参数，例如：localhost:3000/:slug我想要其中的 slug id。我已经为该 slug 定义了 Next.js 13 page.jsx。但是如何获取导航栏组件中的 slug id。我也不想使用，window.location.pathname因为当页面路由到不同的 slug 时它不会改变，并且仅在我刷新时才会改变。

我尝试过旧的 Next.js 12 方法：

//components/navbar.jsx;

import { useRouter } from "next/navigation";

export default function Navbar () {
  const router = useRouter();
  const { slug } = router.query;

  useEffect(() => {
    console.log(slug);
  }, []);

  return <p>Slug: {slug}</p>
}

然而它不起作用。