我在 next.js 中遇到路由问题。服务器上的项目位于子目录中:exmaple.com/app。
我想实现的路由:(example.com/app/<locale>/<pageName>
在url前添加前缀)。当我尝试将其添加到 href 时,会以Link
这种方式生成 url:example.com/<locale>/app/<pageName>
有没有办法在前缀之后添加语言环境,而不是相反?当我使用 basePath 时,它会在 example.com/app/app 中为我的应用程序提供服务,因为项目位于 /app 子目录中
//next.config.js
const { i18n } = require('./next-i18next.config');
module.exports = {
i18n,
basePath: process.env.NODE_ENV !== 'production' ? '/app' : '',
assetPrefix: '/app/',
};
用于包装链接的自定义链接组件:
//link.tsx
import React from 'react';
import NextLink, { LinkProps } from 'next/link';
import { useRouter } from 'next/router';
export interface ILinkProps extends LinkProps {
children: React.ReactChild;
asLink?: boolean;
}
Link.defaultProps = {
asLink: false,
};
export default function Link(props: ILinkProps): React.ReactElement {
const { children, asLink, href, locale, ...rest } = props;
const router = useRouter();
const currentLocale = router.locale;
return (
<>
{asLink ? (
<NextLink
{...rest}
href={href}
locale={locale || currentLocale}
as={href}
passHref
>
{children}
</NextLink>
) : (
children
)}
</>
);
}