Next.js 静态路由与动态路由重叠

Question

我正在使用 Next.JS 应用程序路由系统。

我创建了一个结构类似于 pages/[country]/[language]/index.js 的动态路由。

还有一个结构为pages/cz/cz/index.js的静态路由。

出现问题然后我在静态页面上并尝试通过 Link 组件导航以访问静态路由内容在我的情况下应该转到主页并重新加载同一页面，而不是呈现动态路由内容.

在我的例子中，link 只是两个路线的主页 <Link to="/"> 的简单导航。但也许问题在于如何为预定义和动态路由设置 index.js 文件。

cz/cz/index.js

export { default } from '../../../components/HomePage/';

const { getStaticProps } = createRoute({
  path: '/',
  locale: 'cs',
});

export { getStaticProps };

[国家]/[语言]/index.js

export { default } from '../../../components/HomePage/v2';

const { getStaticPaths, getStaticProps } = createRoute({
  path: '/',
  exclude: ['cs'],
  otherLocales: ['cs'],
});

export { getStaticPaths, getStaticProps };

创建路线

export default function createRoute({
  path,
  otherLocales,
  getPathParams,
  locale,
} = {}) {
  const locales = _.without(include, ...exclude);
  return {
    getStaticPaths: createGetStaticPaths({
      locales,
      getPathParams,
    }),
    getStaticProps: createGetStaticProps({
      path,
      locale,
      locales,
      otherLocales,
    }),
  };
}

页面结构

那么为什么 [country]/[language]/index.js 会覆盖 cz/cz/index.js 呢？

那么 nextJS 路由中有什么可以绝对匹配 URL 的吗？

或者确保从静态路由转到静态路由？

Answer 1

以下 next.js documentation 预定义路由优先于动态路由，动态路由优先于捕获所有路由。看看下面的例子：

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

在您的情况下，您已经定义了预定义路由 cz/cz/index.js 并且此路由具有优先级

Answer 2

如果您碰巧使用了重定向，请注意它们会在下一次访问页面之前进行处理。

Redirects are checked before the filesystem which includes pages and /public files.

https://nextjs.org/docs/api-reference/next.config.js/redirects

Next.js 静态路由与动态路由重叠

Next.js overlaps static route with dynamic route

javascript

routes

reactjs

next.js