基于NextJS中可路由子目录的不同自定义404 Page not found错误页面的实现(应用路由器结构)

gstyhher  于 9个月前  发布在  其他
关注(0)|答案(1)|浏览(80)

404错误页面404错误页面(= not-found.tsx)文件。实际上有两个,一个在app/(paths)中,一个在app/(paths)/(jobs)/jobs/(cats)中。当用户访问url example myapp.com/blablabla-nothing-here时,第一个未找到的文件应该呈现。当用户访问url example myapp.com/jobs/blabla-no-job-cat-here时,第二个未找到的文件应该呈现。在这两种情况下,我的自定义未找到的文件都不呈现。为什么?以下是我的完整结构:
structure
P.S.我的not-found文件的内容是正确的,因为当我将其移动到app/not-found时,它会呈现。“全局”文件是正确的。/jobs内部的“本地”文件不是正确的。
移动文件,并期望它的工作,但它没有。

sq1bmfud

sq1bmfud1#

你可能会得到这个有用的解决方案:
由于根 not-found.tsx 文件按预期工作,您需要转到 job 目录并创建一个文件夹,将其重命名为**[... notFound],然后在其中创建一个page.txs文件,并将not-found.tsx代码放入此page.tsx**文件中。
例如,假设根app/not-found.tsx文件包含以下代码:

// app/not-found.tsx
export default function NotFound(){
    // your code if needed.
    return(<p>Not found from root not-found.tsx</p>);
}

字符串
你的app/job/not-found.tsx文件包含以下代码:

// app/job/not-found.tsx
export default function NotFound(){
    // your code if needed.
    return(<p>Not found from job not-found.tsx</p>);
}


app/job/not-found.tsx中的代码相应地移动到app/job/[..notFound]/page.tsx文件中:

// app/job/[...notFound]/page.tsx
export default function NotFound(){
    // your code if needed.
    return(<p>Not found from job not-found.tsx</p>);
}

相关问题