next.js useRouter为空; isready似乎不能与nextjs 13一起工作

mec1mxoz 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(335)

我正在尝试下一个js13，我得到了一些错误，我不能修复。我的代码：

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
提前感谢你帮我解开这个谜团。

next.js

来源：https://stackoverflow.com/questions/74317978/userouter-is-null-router-isready-does-not-seem-to-work-with-nextjs-13

1条答案

按热度按时间

fnx2tebb1#

您只能在React函数组件的顶级内部调用useRouter()。
不要在循环、条件或嵌套函数中调用挂钩。相反，应始终在React函数的顶层，在任何早期返回之前使用挂钩。
在此处了解有关挂钩规则的更多信息：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>
    )
}

赞(0）回复(0）举报 2022-11-05

我来回答

next.js useRouter为空; isready似乎不能与nextjs 13一起工作

1条答案

相关问题

热门标签

最新问答