我正在使用 Next.JS 应用程序路由系统。
我创建了一个动态路由,其结构类似于 pages/[country]/[language]/index.js
.
还有一个结构为 pages/cz/cz/index.js
的静态路由。 .
问题出现然后我在静态页面上并尝试浏览 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?
或者确保从静态路由转到静态路由?
最佳答案
关注 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
并且这条路线有优先权
关于javascript - Next.js 将静态路由与动态路由重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70120480/