NextJS 路由在部署时不起作用,但在使用我的本地服务器时起作用

str*_*rks 7 reactjs next.js

我有以下网址:

/job/engineer_123456/edit/abcde
Run Code Online (Sandbox Code Playgroud)

现在,当我运行本地服务器时: npm run dev ("next src/") 然后当我转到该链接时它就可以工作了。但是,当我部署项目(到 firebase)时,我会从该 url 收到 404 错误。

我感觉路由中存在冲突,因为我的 NextJS 页面目录结构看起来像 /job 在页面下):

在此输入图像描述

难道是因为某种原因在生产中,当我转到该链接时,我将而/job/[job].js不是/job/[job]/edit/[editId].js

我真的很困惑为什么生产显示 404 页面但在本地它可以工作。

小智 6

根据文档:

预定义路由优先于动态路由,动态路由优先于捕获所有路由。看看下面的例子:

pages/post/create.js - 将匹配 /post/create

pages/post/[pid].js - 将匹配 /post/1、/post/abc 等,但不匹配 /post/create

pages/post/[...slug].js - 将匹配 /post/1/2、/post/a/b/c 等,但不匹配 /post/create、/post/abc

*通过自动静态优化进行静态优化的页面将在不提供路由参数的情况下进行水合,即查询将是一个空对象 ({})。

水合后,Next.js 将触发应用程序更新,以在查询对象中提供路由参数。*

所以,你需要有类似的东西:

pages - folder
    job - folder
        [...slug] - folder
            - index.js
            edit - folder
                - index.js
Run Code Online (Sandbox Code Playgroud)

slug 文件夹将充当所有/job/[slug]路线的“模板”,该路线将有一个 index.js 和一个编辑页面

  • 结果是“错误:Catch-all 必须是 URL 的最后一部分。” (2认同)