react、i18n、redux 和 react 路由器配置
react, i18n, redux and react router configuration
我有一个使用 react-router 和 redux 的简单(目前)应用程序,我想为其添加国际化功能。
我已经安装了 npm 包 react-i18next
并且能够安装 运行 提供的示例。我已经将适当的导入添加到我自己的应用程序中,并将 i18n 标签添加到根渲染方法中。
当我将 I18nextProvider 标签添加到渲染方法时,出现错误
can't find module 'react'
这不是特别有用,尤其是因为如果我删除标签,React 应用程序 运行 没问题。
我使用的渲染方法是:
import React from 'react'
import ReactDOM from 'react-dom'
....
ReactDOM.render(
<I18nextProvider i18n={ i18n }>
<Provider store={store}>
<div>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={DashboardIndex}/>
<Route path="about" component={About}/>
<Route path="collectors" component={Collectors}/>
</Route>
</Router>
<DevTools />
</div>
</Provider>
</I18nextProvider>,
document.getElementById('app')
编辑:
我已经使用 yo react 生成器启动了一个空白应用程序,它给出了同样的问题,所以我只能假设这个问题与 webpack build
我对 react/redux 等人很陌生。但是在互联网上没有很多帮助的情况下,我们将不胜感激。
完整的堆栈跟踪是:
Uncaught Error: Cannot find module 'react'o @
index.js?0f21:1(anonymous function) @ index.js?0f21:1r.4.react @
index.js?0f21:1o @ index.js?0f21:1(anonymous function) @ index.
js?0f21:1r.2../I18nextProvider @ index.js?0f21:1o @ index.js?0f21:1e @
index.js?0f21:1(anonymous function) @ index.js?0f21:1c @
index.js?0f21:1(anonymous function) @ index.js?0f21:1(anonymous
function) @ app.js:4127__webpack_require__ @ app.js:535fn @
app.js:76(anonymous function) @ VM91841:35(anonymous function) @
index.js?9552:67(anonymous function) @ index.js?9552:67(anonymous
function) @ app.js:1024__webpack_require__ @ app.js:535fn @
app.js:76(anonymous function) @ app.js:567__webpack_require__ @
app.js:535(anonymous function) @ app.js:558(anonymous function) @
app.js:561
client?8a21:22 [WDS] Hot Module Replacement enabled.
您是否需要 'react' 具有
的 js 文件
ReactDOM.render(
<I189nextProvider i18n={ i18n }>
<Provider store={store}>
<div>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={DashboardIndex}/>
<Route path="about" component={About}/>
<Route path="collectors" component={Collectors}/>
</Route>
</Router>
<DevTools />
</div>
</Provider>
</I189nextProvider>,
document.getElementById('app')
如果不是你有问题...你所有的 jsx 都转换为 React.createComponent(...)
不需要 React 会导致捆绑错误。
我从来没有从技术角度深入了解这个问题,因此重构为使用 react-intl
来满足我的国际化需求。它也适用于 redux
。
我有一个使用 react-router 和 redux 的简单(目前)应用程序,我想为其添加国际化功能。
我已经安装了 npm 包 react-i18next
并且能够安装 运行 提供的示例。我已经将适当的导入添加到我自己的应用程序中,并将 i18n 标签添加到根渲染方法中。
当我将 I18nextProvider 标签添加到渲染方法时,出现错误
can't find module 'react'
这不是特别有用,尤其是因为如果我删除标签,React 应用程序 运行 没问题。
我使用的渲染方法是:
import React from 'react'
import ReactDOM from 'react-dom'
....
ReactDOM.render(
<I18nextProvider i18n={ i18n }>
<Provider store={store}>
<div>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={DashboardIndex}/>
<Route path="about" component={About}/>
<Route path="collectors" component={Collectors}/>
</Route>
</Router>
<DevTools />
</div>
</Provider>
</I18nextProvider>,
document.getElementById('app')
编辑: 我已经使用 yo react 生成器启动了一个空白应用程序,它给出了同样的问题,所以我只能假设这个问题与 webpack build
我对 react/redux 等人很陌生。但是在互联网上没有很多帮助的情况下,我们将不胜感激。
完整的堆栈跟踪是:
Uncaught Error: Cannot find module 'react'o @ index.js?0f21:1(anonymous function) @ index.js?0f21:1r.4.react @ index.js?0f21:1o @ index.js?0f21:1(anonymous function) @ index.
js?0f21:1r.2../I18nextProvider @ index.js?0f21:1o @ index.js?0f21:1e @ index.js?0f21:1(anonymous function) @ index.js?0f21:1c @ index.js?0f21:1(anonymous function) @ index.js?0f21:1(anonymous function) @ app.js:4127__webpack_require__ @ app.js:535fn @ app.js:76(anonymous function) @ VM91841:35(anonymous function) @ index.js?9552:67(anonymous function) @ index.js?9552:67(anonymous function) @ app.js:1024__webpack_require__ @ app.js:535fn @ app.js:76(anonymous function) @ app.js:567__webpack_require__ @ app.js:535(anonymous function) @ app.js:558(anonymous function) @ app.js:561 client?8a21:22 [WDS] Hot Module Replacement enabled.
您是否需要 'react' 具有
的 js 文件ReactDOM.render(
<I189nextProvider i18n={ i18n }>
<Provider store={store}>
<div>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={DashboardIndex}/>
<Route path="about" component={About}/>
<Route path="collectors" component={Collectors}/>
</Route>
</Router>
<DevTools />
</div>
</Provider>
</I189nextProvider>,
document.getElementById('app')
如果不是你有问题...你所有的 jsx 都转换为 React.createComponent(...)
不需要 React 会导致捆绑错误。
我从来没有从技术角度深入了解这个问题,因此重构为使用 react-intl
来满足我的国际化需求。它也适用于 redux
。