我在我的项目中使用了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
3条答案
按热度按时间5sxhfpxr1#
您提供的两条路线完全相同,没有任何不同。因此,它们将由单个页面处理。没有两个URL将路由到上述两个路由的不同nextjs页面的例子。
用
[]
编写的任何内容都可以处理任何类型的值,例如1或2或任何其他值。你不能创建两个页面来处理同一个请求,因为next或其他任何人都无法知道你使用的是route_id还是location_id,因为这两个变量都表示任何值。
如果要区分它们,请使用
/route/[route_id]
而不是/location/[location_id]
,或使用queryparams
,例如pages/[language]/location?locationid=[location_id]
然后呢
xoshrz7s2#
来自Next.js的官方代码:
目前不支持同一网段级别的多个动态参数
nuypyhwy3#
在某些情况下,Next.js可以处理多个动态路由。例如,一旦检测到一个动态路由包含多个文件,如果这些文件也包含
getStaticPaths
,它就可以遍历它们。如果第一个文件没有路径,它会尝试在第二个文件中找到它。然而,这可能有许多边缘情况,在如何预期的功能,所以可以理解,他们没有包括它。我通过使用一个动态路由来解决这个问题,该路由充当两组数据的并集。在呈现过程中,我检查页面是哪些数据,并提供相应的组件。下面是一些代码作为示例。