我的代码遇到了一个问题,我收到了错误:
“未捕获的错误:NextRouter未在控制台中装入”。
经过调查,我发现从Next.js版本13开始,我们应该使用next/navigation
而不是next/router
。但是,我不知道如何做出这种改变。谁能提供一些指导或建议,如何解决这个问题?
下面是当前代码:
import { FC } from 'react';
import { useRouter } from 'next/router';
import { ShowPage } from './ShowPage';
const ProductShow: FC = () => {
const router = useRouter();
const productId = router.query.productId as string;
return <ShowPage productId={productId} />;
};
export default ProductShow;
我尝试使用useSearchParams
修改代码以获取查询参数,尝试从URL获取特定的productId
并将其设置为状态变量。
import { FC, useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { ShowPage } from './ShowPage';
const ProductShow: FC = () => {
const [searchParams] = useSearchParams();
const [productId, setProductId] = useState<string | null>(null);
useEffect(() => {
const [id,] = searchParams.entries().find(([key]) => key === 'productId');
if (id) {
setProductId(id);
}
}, [searchParams]);
if (!productId) {
return null;
}
return <ShowPage productId={productId} />;
};
export default ProductShow;
我期望从URL中正确获取productId
并将其设置为productId状态变量。但是,当我尝试在searchParams.entries()
上使用find方法时遇到了一个问题。错误消息如下:
未捕获的类型错误:useSearchParams不是函数或其返回值不可迭代
还有一个TypeScript错误:
类型“IterableIterator<[string,string]>”没有属性“find”。
任何建议将不胜感激。
1条答案
按热度按时间w41d8nur1#
useSearchParams
返回对象searchParams
,而不是当前代码假设的第一个元素为searchParams
的数组。它应该是:另外,你可以将
useEffect
代码简化为:如果你想获得动态路由的slug,请使用
useParams
。它是这样工作的: