我有一个NextJS应用程序，我刚刚完成了两件事。 1）我已升级到最新版本的NextJS（9.0.1），并且2）我已将文件（package.json，pages /，components /等）从项目根目录复制到新的src / app /项目根目录中的子目录。
不使用动态路由的页面可以很好地加载，但是当我需要使用Next中的路由器对象时会有一个问题。我的原始代码（在以上两件事之前都可以正常工作）：
if(dialogView == null)
dialogView = LayoutInflater.from(this).inflate(R.layout.custom_popup, null);
dialog.setContentView(dialogView);
这给了我错误：import { useRouter } from "next/router";
import { mockConsts } from "../../public/mockConsts";
const router = useRouter();
const userObj = mockConsts.users.filter(
user => user.username === router.query.username
)[0];
。
如果我尝试一下/抓住它：
TypeError: Cannot read property 'query' of null客户端和服务器返回两个不同的错误。服务器仍然返回上述错误（let userObj = mockConsts.users[0];
try {
const router = useRouter();
userObj = mockConsts.users.filter(
user => user.username === router.query.username
)[0];
console.log("QUERY", router.query);
} catch (e) {
console.log("ERR", e);
}
）。
客户端返回（通过console.log）：
TypeError: Cannot read property 'query' of null通过try / catch，我可以使代码按预期运行，但是只有在显示QUERY Object { } [username].tsx:16
Warning: Did not expect server HTML to contain a <div> in <div>. index.js:1
QUERY Object { username: "dog" } [username].tsx:16
之后（控制台日志中的第一个“ QUERY”为空白）。显然，这并不理想。
编辑：
我已经重写了try / catch，因此功能符合我的期望：
mockConsts.users[0]ROUTER被记录两次：
try {
router = useRouter();
console.log("ROUTER", router);
userObj = mockConsts.users.filter(
user => user.username === router!.query.username
)[0];
} catch (e) {
console.log("ERR", e);
}
如您所见，ROUTER
Object { pathname: "/user/[username]", route: "/user/[username]", query: {}, asPath: "/user/[username]", components: {…}, events: {…}, push: field(), replace: field(), reload: field(), back: field()
, … }
[username].tsx:23
ROUTER
Object { pathname: "/user/[username]", route: "/user/[username]", query: {…}, asPath: "/user/dog", components: {…}, events: {…}, push: field(), replace: field(), reload: field(), back: field(), … }
[username].tsx:23
属性现在具有值，而query属性却有所不同。