• next-i18next 常见Bug记录


    TypeError: Cannot read property 'wait' of null

    此处根本原因为next版本(使用withNamespaces导入命名空间报错)
    ^5.0.0版本不支持导入_app.js导致i18n注入失败
    ^6.0.0版本或者以上版本会支持导入_app.js
    尝试更新withNamespaces的wait和options并没有效果,相反会导致之后的一系列bug
    此处使用next-i18next步骤链接: [next-i18next].
    附上react-i18next的链接: [react-i18next].
    附上i18next的链接: [i18next].
    附上语言转换操作技巧:使用translate-components插件可以通过node命令进行生成对应json文件,然后根据需要进行转换即可

    You have not declared a namespacesRequired array on your page-level component

    此处在页面级组件不导入namespacesRequired命名空间组或者在static下的locales有未引用的json都会报这个警告

    nexti18next FrontWebsite Router Options

    此处如果next没有版本限制并且可以使后台支持最好的办法是使用官方文档推荐做法
    此方案适用于因后台无法提供支持且无法使用pm2服务器

    1. 更改exportPathMap配置使带有语言前缀的路径可以正常刷新定向
    2. 在next钩子_app.js中render之前去检测当前Router路径得以判断出当前应该changeLanguage哪种语言
    3. 封装next/link next/router以使前端的路由定向正常

    以下附上代码方案

    /**************************************
        --------------_app.js--------------
    **************************************/
    import React from 'react'
    import App, { Container } from 'next/app'
    import { i18n, appWithTranslation } from '../i18n'
    
    class MyApp extends App {
    //     static async getInitialProps({ Component, ctx }) {
    //       // const language = ctx ? ctx.req.headers['accept-language'] : (navigator.language || navigator.browserLanguage).toLowerCase()
    //    let pageProps = {}
    //     
    //       if (Component.getInitialProps) {
    //         pageProps = await Component.getInitialProps(ctx)
    //       }
    //     
    //       return { pageProps }
    //     }
      render() {
        const { Component, pageProps } = this.props
        // console.log(this.props)
        const languageUrl = this.props.router.asPath.replace(///g, '').substr(0, 2)
        const languages = ['zh', 'th']
        const language = ~languages.indexOf(languageUrl) ? languageUrl : languages[0]
        i18n.changeLanguage(language)
        return (
            <Container>
                    <Component {...pageProps} />
            </Container>
        )
        }
    }
    
    export default appWithTranslation(MyApp)
    
    /**************************************
        --------------Link---------------
    **************************************/
    import React from 'react'
    import NextLink from 'next/link'
    import { i18n } from '../../i18n'
    
    class Link extends React.Component {
        render () {
            const {
                as,
                href,
                children,
                ...props
            } = this.props;
            
            return React.createElement(NextLink, { 
                href: href,
                as: `/${i18n.language}${href}`
            }, children);
        }
    }
    
    export default Link
    
    /**************************************
        ------------Router-------------
    **************************************/
    import NextRouter from 'next/router';
    import { i18n } from '../../i18n'
    const propertyFields = ['pathname', 'router', 'query', 'asPath', 'components', 'events'];
    const coreMethods = ['reload', 'back', 'beforePopState', 'ready', 'prefetch'];
    const wrappedMethods = ['push', 'replace'];
    
    const Router = {};
    propertyFields.forEach(field => {
    Object.defineProperty(Router, field, {
        get() {
        return NextRouter[field];
        }
    });
    });
    coreMethods.forEach(method => {
    Router[method] = (...args) => NextRouter[method](...args);
    });
    wrappedMethods.forEach(method => {
    Router[method] = (path, as, options) => {
        return NextRouter[method](path, `/${i18n.language}${path}`, options);
    };
    });
    
    export default Router;
  • 相关阅读:
    Java读写配置文件prop.properties
    java中int转String 固定位数 不足补零
    plantix插件工具,eclipse工具
    MongoDB API java的使用
    CSS定位细节
    Mysql 基于BinaryLog的复制
    Mysql之复制服务
    Linux 中文乱码问题解决
    Maven中手动引用第三方jar包
    innodb之超时参数配置
  • 原文地址:https://www.cnblogs.com/universe-cosmo/p/10968942.html
Copyright © 2020-2023  润新知