0

我在 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
            )}
        </>
    );
}
4

0 回答 0