useRouter为空；router.isready似乎不适用于nextjs 13。
我尝试下一个js 13，我有一些错误，我无法修复。我的代码：
import { useRouter } from 'next/navigation';
async function getCheckoutInfo() {
const router = useRouter();
if (router.isReady) {
console.log('Router query:', router.query);
} else {
console.log('Router is not ready yet')
}
return 'test';
}
export default async function CheckoutPage() {
const info = await getCheckoutInfo();
return(
<div>
<h1>Checkout </h1>
<p>{info}</p>
</div>
)
}我的错误信息：
Unhandled Runtime Error
Error: Cannot read properties of null (reading 'useContext')
Call Stack
Object.useContext
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react/cjs/react.shared-subset.development.js (1428:31)
useRouter
webpack-internal:///(sc_server)/./node_modules/next/dist/client/components/navigation.js (91:32)这里怎么了？在我看来，useRouter似乎不像预期的那样工作。以前我使用了useEffect()，它工作得很好，但是对于nextjs 13，您不需要这样做，我想：https://beta.nextjs.org/docs/api-reference/use-router
谢谢你帮我解开这个谜团。
回答 3
Stack Overflow用户
发布于 2022-11-05 17:36:57
由于NextJS 13 router.ready不可用，它们只有以下方法
router.push
router.replace
router.refresh()
router.prefetch
router.back()
router.forward()对于获取query值的情况，请使用钩子useSearchParams
import { useSearchParams } from 'next/navigation';
export default async function CheckoutPage() {
const searchParams = useSearchParams();
return(
<div>
<h1>Checkout </h1>
<p>{searchParams.toString()}</p>
</div>
)
}Stack Overflow用户
发布于 2022-11-04 14:07:03
您只能在function函数组件的顶层调用useRouter()。
不要在循环、条件或嵌套函数中调用钩子。相反，在任何早期返回之前，始终在React函数的顶层使用Hooks。
在这里了解更多关于钩子规则的信息：https://reactjs.org/docs/hooks-rules.html
试试这样的东西，
import { useRouter } from 'next/router';
function getCheckoutInfo(router) {
if (router.isReady) {
console.log('Router query:', router.query);
} else {
console.log('Router is not ready yet')
}
return 'test';
}
export default function CheckoutPage() {
const router = useRouter();
const info = getCheckoutInfo(router);
return(
<div>
<h1>Checkout </h1>
<p>{info}</p>
</div>
)
}Stack Overflow用户
发布于 2022-11-15 07:58:17
如果您正在使用新的应用程序目录，那么are组件分为两类:服务器组件和客户端组件(如此处的https://beta.nextjs.org/docs/rendering/server-and-client-components)，默认情况下，它们是React组件。
使用钩子的组件(useRouter，useEffect，使用.)被归类为客户端组件，您需要在文件顶部(任何导入之前)添加"use“指令(按照惯例https://beta.nextjs.org/docs/rendering/server-and-client-components#client-components)。所以，代码应该是这样的：
'use client';
import { useRouter } from 'next/navigation';
//... rest of the codehttps://stackoverflow.com/questions/74317978
复制相似问题
腾讯云开发者
