Next.js Pages子文件夹路由跳转异常问题求助

先解决最直接的问题：表单默认行为+路由路径错误 #

你碰到的问题根源有两个：

1. 路由路径写错了：router.push("/createvenue") 是绝对根路径，会直接跳去/createvenue，而你的页面在sys-admin文件夹下，正确路径应该是/sys-admin/createvenue
2. 表单默认提交没阻止：<form>的onSubmit事件默认会刷新页面，直接打断Next.js的客户端路由跳转，所以哪怕你写对路径也可能没效果

修改sys-admin/index.js的正确代码： #

import { useRouter } from "next/router";

export default function CreateCustomer() {
  const router = useRouter();
  const handleSubmit = (e) => {
    // 必须先阻止表单默认刷新行为
    e.preventDefault();
    // 用正确的子路由路径
    router.push("/sys-admin/createvenue");
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <button className="btn btn-filled">Create New Customer</button>
      </form>
    </>
  );
}

同步修正createvenue.js的跳转： #

你里面写的router.push("/createusers")同样路径错误（而且你文件名是createuser.js，多了个s），也要阻止默认行为：

import { useRouter } from "next/router";

export default function CreateVenue() {
  const router = useRouter();
  const handleSubmit = (e) => {
    e.preventDefault();
    router.push("/sys-admin/createuser");
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Enter venue name" />
        <button className="btn btn-filled">Next</button>
      </form>
    </>
  );
}

关于自动继承父路径的需求 #

Next.js不会自动帮你把当前文件夹作为根路径拼接，但可以用router.asPath获取当前页面的路由，动态拼接子路径，这样以后父路径改名不用改跳转代码：
比如在sys-admin/index.js里：

const handleSubmit = (e) => {
  e.preventDefault();
  // 直接基于当前路径拼接子路由
  router.push(`${router.asPath}/createvenue`);
};

如果以后你的页面路由层级更深，比如/sys-admin/xxx，要跳同层级的子页面，可以提取父路径：

const parentPath = router.asPath.split("/").slice(0, -1).join("/");
router.push(`${parentPath}/createvenue`);

为什么之前写全路径也无效？ #

多半是因为表单默认刷新没阻止，点击按钮后页面直接刷新了，Next.js的客户端路由还没生效就被浏览器的默认行为覆盖了，阻止默认行为后再测试就正常了。

内容的提问来源于stack exchange，提问作者Rich