用标志来响应国际更改语言

Question

我在我的应用程序中设置了国际化。这考虑到浏览器语言的更改。我还要考虑带标志的语言变化。

我创建了我的标志，并将其放置在页面的登录make头中。

class Header extends React.Component {

  constructor(props) {
  super(props);    
}

handleClick(codeLanguage) {
   console.log(codeLanguage);
}

render() {

return (
      <IconButton>
        <Flag country="fr" 
          height='30px' 
          witdh="30px" 
          onClick={() => {this.handleClick("fr")}} />
      </IconButton>
      <IconButton>
        <Flag country="gb" 
          height='30px' 
          witdh="30px"
          onClick={() => {this.handleClick("en")}} />
      </IconButton>
);
}
}

我的索引包含国际化代码：

const localeData = {
 "fr": messages_fr,
 "en": messages_en
};

addLocaleData([...en, ...fr]);

const language = (navigator.languages && navigator.languages[0]) || 
navigator.language || navigator.userLanguage;

const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];

const messages = localeData[languageWithoutRegionCode] || 
localeData[language] || localeData.fr;

const hist = createBrowserHistory();

ReactDOM.render(
 <IntlProvider locale={language} messages={messages}>
  <Router history={hist}>
   <Switch>
    {indexRoutes.map((prop, key) => {
     if (prop.redirect)
      return <Redirect from={prop.path} to={prop.to} key={key} />;
     return <Route path={prop.path} component={prop.component} key={key} />;
    })}
   </Switch>
  </Router>
 </IntlProvider>,
 document.getElementById("root")
);
serviceWorker.unregister();

如何根据标志的选择指示我的index.js更改语言