Question

我在我的应用中使用动态路由。这是我正在使用的文件夹结构

-pages
  -department
    -[slug].js

现在我想显示只有 slug 值为 cse, eee, swe, english e.t.c 的页面，否则我想显示 404 Not Found 页面。有没有办法设置路线名称数组？然后，如果该数组中包含 slug 值（我可以使用 getServerSideProps 获得），我将提供该页面，否则将提供 404 Not Found 页面。

为什么我需要那个？

在 getServerSideProps 函数中，我从 api 端点获取数据。在这种情况下，如果 api-endpoint 中不包含 slug 值，服务器会抛出 Request failed with status code 501 错误！因此，如果 slug 值为 cse，则 api 端点可用，我可以获取数据。如果 slug 值为 anything or xyasdfs，则 api-endpoint 不可用且我无法获取数据并且服务器抛出以下错误。

Answer 1

我会在我的组件中检查响应正文中的属性。例如，如果所有部门都有名称，则检查它，如果它不存在，则返回 404。

Answer 2

服务端渲染应该是这样的

Page.getInitialProps = async ({query}) => {
  if(query.slug == 'cse') {
    //codes
  }
}

或者你可以使用下一个路由器钩子 https://nextjs.org/docs/routing/dynamic-routes

NextJS 动态路由 - 是否可以设置路由名称数组？

2 个答案: