不能对同一动态路径Nextjs使用不同的slug名称

cbjzeqam  于 2023-05-12  发布在  其他
关注(0)|答案(3)|浏览(180)

我在我的项目中使用了nextjs的默认动态路由技术,它基于文件夹结构。我有一条路线是:

pages/[language]/location/[location_id]

现在我遇到了一个用例,我需要上面的路由完全相同,除了[location_id]的最后一个参数,我需要[route_id]在这里。
当我为这个新路由创建一个文件[route_id].js时,我遇到了这个错误:

throw new Error(`You cannot use different slug names for the same dynamic path ('${previousSlug}' !== '${nextSlug}').`);

我知道这个错误和问题,为什么它显示我做了一些研究后,但我无法理解我如何才能解决这个问题。我只是想知道如何在我的应用程序中实现这两个路由:

Route 1: pages/[language]/location/[location_id]
Route 2: pages/[language]/location/[route_id]

PS:我已经研究过了:https://github.com/zeit/next.js/issues/9081

5sxhfpxr

5sxhfpxr1#

您提供的两条路线完全相同,没有任何不同。因此,它们将由单个页面处理。没有两个URL将路由到上述两个路由的不同nextjs页面的例子。
[]编写的任何内容都可以处理任何类型的值,例如1或2或任何其他值。
你不能创建两个页面来处理同一个请求,因为next或其他任何人都无法知道你使用的是route_id还是location_id,因为这两个变量都表示任何值。
如果要区分它们,请使用
/route/[route_id]而不是
/location/[location_id],或使用queryparams,例如
pages/[language]/location?locationid=[location_id]
然后呢

pages/[language]/location?routeid=[route_id]
xoshrz7s

xoshrz7s2#

来自Next.js的官方代码:

目前不支持同一网段级别的多个动态参数

if (previousSlug !== null) {
                    // If the specific segment already has a slug but the slug is not `something`
                    // This prevents collisions like:
                    // pages/[post]/index.js
                    // pages/[id]/index.js
                    // Because currently multiple dynamic params on the same segment level are not supported
                    if (previousSlug !== nextSlug) {
                        // TODO: This error seems to be confusing for users, needs an error link, the description can be based on above comment.
                        throw new Error(`You cannot use different slug names for the same dynamic path ('${previousSlug}' !== '${nextSlug}').`);
                    }
                }
nuypyhwy

nuypyhwy3#

在某些情况下,Next.js可以处理多个动态路由。例如,一旦检测到一个动态路由包含多个文件,如果这些文件也包含getStaticPaths,它就可以遍历它们。如果第一个文件没有路径,它会尝试在第二个文件中找到它。然而,这可能有许多边缘情况,在如何预期的功能,所以可以理解,他们没有包括它。
我通过使用一个动态路由来解决这个问题,该路由充当两组数据的并集。在呈现过程中,我检查页面是哪些数据,并提供相应的组件。下面是一些代码作为示例。

const getStaticPaths = () => {
  const pathsA = [...]
  const pathsB = [...]
  return {paths: [...pathsA, ...pathsB]}
}

const getStaticProps = (context) => {
  const isDataA = ...
  const data = ...
  return {props: {isDataA, data}}
}

const Page = (props) => {
  if (props.isDataA) {
    return <DataAPage data={props.data} />
  } else {
    return <DataBPage data={props.data} />
  }
}

const DataAPage = (props) => {
  return <>{props.data}</>
}

const DataBPage = (props) => {
  return <>{props.data}</>
}

相关问题