Help needed. Reload page seems to broke the language. Dynamic keys??

[isra60]

Hi. I have follow the tutorial.. this is my app.js and my index.js

Index.js

import { withTranslation } from '../i18n'
class Index extends React.Component {

  static async getInitialProps (params) {
    const { store, isServer, req, query } = params;
    if (isServer) {
      await store.dispatch(restoreStatus(req));   
      await store.dispatch(restoreBasicSettings(req));  
      await store.dispatch(restoreSNMPSettings(req));    
      await store.dispatch(restoreSIPSettings(req));  
      await store.dispatch(restoreHardwareSettings(req)); 
      await store.dispatch(restoreAdvancedSettings(req));  
    }
  }

  render () {
    return (
      <Layout>
        <MainPage />
      </Layout>
    )
  }
}

_app.js

export default withTranslation('common')(Index)

import React from 'react'
import { Provider } from "react-redux";
import App, { Container } from "next/app";
import withRedux from "next-redux-wrapper";
import { initStore } from '../statemanagement/store'
import '../styles/index.css'

import { appWithTranslation } from '../i18n'

export default withRedux(initStore, {debug: false})(appWithTranslation(class MyApp extends App {

    static async getInitialProps({Component, ctx}) {
        return {
            pageProps: {
                // Call page-level getInitialProps
                ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
            }
        };
    }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Container>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </Container>
        );
    }

}));

Then I have a Menu component that load a settings page with different menues.

import { withTranslation } from '../../../i18n'

class SettingsView extends PureComponent {

    constructor(props) {
      super(props);
    }

    componentDidMount() {

    }

    componentWillUnmount() {

    }

    render() {
      this._menu = [
        {

          title: this.props.t('menu_status'), // Title that is displayed as text in the menu
          url: "/status", // Identifier (url-slug)
          footerVisible: false

        },
        {
          title: this.props.t('menu_basic'), 
          url: "/settings/basicSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_snmp'),
          url: "/settings/snmpSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_sip'),
          url: "/settings/sipSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_hardware'),
          url: "/settings/hardwareSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_advanced'),
          url: "/settings/advancedSettings",
          footerVisible: true
        }
      ];
         // Return your Settings Pane
         return (
          <SettingsPane items={this._menu} index="/status" >
          <SettingsMenu headline="Intercom" />
          <SettingsSingleContent header={true}>
              <SettingsPage handler="/status" >
                  <StatusSettingsForm/>
              </SettingsPage>
              <SettingsPage handler="/settings/basicSettings">
                  <BasicSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/snmpSettings">
                  <SNMPSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/sipSettings">
                  <SIPSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/hardwareSettings">
                  <HardwareSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/advancedSettings" >
                  <AdvancedSettingsForm />
              </SettingsPage>
          </SettingsSingleContent>
        </SettingsPane>

         )
        }
  }

  export default withTranslation()(SettingsView)

I don't know how to make this to change dinamycally as this menu only rerender on loading page (location.reload())

Then in one of my form settings I have the language selector.

function submit(values, dispatch) {
  i18n.changeLanguage(values.language == "spanish" ? "es": "en")
  return dispatch(setAdvancedSetting(values));
}

So when I changed the language every label of the page changes to the correct language (only the ones related to Menu not get changed (as it has the problem about reload the menu )).

So If I try yo reload the page with the language changes I don't know why but the page rerenders with the default language. May something with the initialprops I don't fully understand or other option...

So two problems

1. How to design better the menu to change with the language changes. I think about dynamic language keys.. for exaple.

this.props.t('menu_basic_settings) generate Basic Settings

but this is possible??

this.props.t({this.props.header})

I mean using an external props?

2. When reload the window the page switch to default language

[isaachinman]

Please post on StackOverflow.

[isra60]

Here is the question in stackoverflow https://stackoverflow.com/questions/61658401/next-i18next-reload-page-seems-to-broke-the-language-dynamic-keys

[isra60]

@isaachinman I have trying with other browser configuration (with have english language as default) and when the page reloads the web changes to english language even with browserLanguageDetection= false

But my delfault language is spanish (es). So any hints of what is wrong??

Thanks in advanced