react国际化 react-intl

首先 下载导入插件 react-intl

npm install react-intl@2 -S

注意： 在这里说下，网上搜了很多都没说下载2.x版本的，现在下载的是3.x的版本,结果被这个版本坑了好久，各种报错，大家下载的时候注意了

我是在路由页面开始的，用法跟redux差不多，需要用 IntlProvider 组件把根组件包裹起来

// IndexLayout.js
import {addLocaleData, IntlProvider} from 'react-intl';
import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
import zh_CN from "@/locale/zh_CN";   //这个是本地自己建的语言文件
import en_US from "@/locale/en_US";   //这个是本地自己建的语言文件

addLocaleData([...en, ...zh]);  // 引入多语言环境的数据


render() {
        let messages = {};
        messages['en'] = en_US;
        messages['zh'] = zh_CN;
        // 这里可以用组件的state,也可以用redux全局的，这里因为我是在其他组件里改变的，所以用的redux来控制
        const language = this.props.public.language;
        return (
            <IntlProvider locale={language} messages={messages[language]}>
                <div className="section">
                    <Header/>
                    <Switch>
                        <Route path="/app/home" component={Home}/>
                        <Route path="/app/about" component={About}/>
                        <Route path="/app/culture" component={Culture}/>
                        <Route path="/app/join" component={Join}/>
                        <Route path="/app/find" component={Find}/>
                        <Route render={() => (<Redirect to="/app/home"/>)}/>
                        <Route component={Home}/>
                    </Switch>
                    <Footer/>
                </div>
            </IntlProvider>
        )
    }

分别创建想要的语言文件

//  zh_CN.js
const zh_CN = {
    home:"首页"
};

export default zh_CN;


// en_US .js
const en_US = {
    home: 'HOME',
};

export default en_US;

配置最后一步挂在到跟根元素上面去

import IndexLayout from "./views";

const hotRender = Component => {
    render(
        <Provider store={store}>
            <Component/>
        </Provider>,
        rootElement
    )
};

hotRender(IndexLayout);

到这里配置就算完成了！

最后 就是使用了

import {FormattedMessage} from 'react-intl';

export Home extends Component{
	render(){
		return(
			<div>
				//  用这个组件代替想要语言切换的内容，下面这个组件英文状态就显示为HOME，中文状态就显示首页
				<FormattedMessage id="home"/>
			</div>
		)
	}
}