如何以编程方式导航到 Next.js 中的其他页面？

Question

在向外部 API 发出发布请求后，我想重定向回主页。我确实对 React 有一些了解，这是我第一次使用 Next.js。这是代码：

export default function New({genres}) {
const createMovie = (values) => {
    console.log(values);
    axios.post(`${process.env.NEXT_PUBLIC_BASE_URL}/movies`, {
        title: values.title,
        description: values.description,
        genres: values.genres,
        release_date: values.release_date,
        cover_url: values.cover_url
    }).then(res => {
        const router = useRouter();
        router.push('/');
    })
}

如您所见，我使用了 router.push() 但收到此错误：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本

在函数和/或请求之后重定向到 Next.js 中其他页面的最有效方法是什么？

Answer 1

您需要移动调用 useRouter() 的位置。您可以将 router.push() 保留在原处。

export default function New({genres}) {
    const router = useRouter();
    const createMovie = (values) => {...}
}

如果您查看Hooks 规则useRouter()，您只能在本例中调用顶层的钩子。