useRouter 为空； router.isready 似乎不适用于 nextjs 13

Question

我正在尝试 next 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

提前感谢您为我解决了这个谜团。

Answer 1

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>
    )
}

Answer 2

您只能在 React 函数组件的顶层调用

useRouter()

。

不要在循环、条件或嵌套函数内调用 Hook。相反，在任何早期返回之前，始终在 React 函数的顶层使用 Hooks。

在此处了解有关 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>
    )
}

Answer 3

如果您正在使用新的App Directory，那么React组件分为两类：服务器和客户端组件（如此处https://beta.nextjs.org/docs/rendering/server-and-client-组件），默认情况下，它们是 React Server 组件。

使用钩子的组件（useRouter、useEffect、use...）被归类为客户端组件，您需要在文件顶部（在任何导入之前）添加“use client”指令（按照惯例 https:// beta.nextjs.org/docs/rendering/server-and-client-components#client-components）。 所以，你的代码应该是这样的：

'use client';

import { useRouter } from 'next/navigation';

//... rest of the code

Answer 4

您必须将导入语句从“next/navigation”更改为“next/router”

import { useRouter } from 'next/navigation';

import { useRouter } from 'next/router';