如何解决NextJS useRouter 在函数体内使用时出错
我希望这是一个简单的问题。我不明白为什么这样做。无论如何,使用 NextJS 我正在尝试使用 useRouter 钩子访问路由器中的参数,并将其与查询字符串插件组合以拆分 asPath,因为如果使用无状态,NextJS 不允许您访问路由器的查询部分。这是我的代码:
import { useRouter } from 'next/router';
import queryString from "query-string";
const withPageRouter = (router) => {
router.query = { ...queryString.parse(router.asPath.split(/\?/)[1]) };
return router;
};
function getRouterParams(){
const router = useRouter();
router = withPageRouter(router);
return router;
}
export async function getTown() {
const town = await getRouterParams();
return town;
}
现在,当我尝试运行它时,出现此错误:
Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
lib/api.js (34:26) @ getRouterParams
32 |
33 | function getRouterParams(){
> 34 | const router = useRouter();
| ^
35 | router = withPageRouter(router);
36 | return router;
37 | }
但在我看来应该没问题;它在一个函数体中?我觉得我错过了一些明显的东西。感谢您的帮助。
解决方法
您不能在正常函数中调用 useRouter()。
您只能在 React 函数组件或自定义钩子的 Top 内部调用 useRouter()
在此处了解有关 Hook 规则的更多信息:https://reactjs.org/docs/hooks-rules.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。