react, i18n, redux 和 react 路由器配置答案

【问题标题】：react, i18n, redux and react router configurationreact, i18n, redux 和 react 路由器配置
【发布时间】：2016-05-23 23:14:43
【问题描述】：

我有一个使用 react-router 和 redux 的简单（目前）应用程序，我想为其添加国际化功能。

我已经安装了 npm 包react-i18next 并且能够安装和运行提供的示例。我已将适当的导入添加到我自己的应用程序中，并将 i18n 标记添加到根渲染方法中。

当我将 I18nextProvider 标签添加到渲染方法时，我得到了错误

找不到模块“反应”

这不是特别有用，特别是因为如果我删除标签，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 构建有关

我对 react/redux 等人非常陌生。但在互联网上没有很多帮助的情况下，真的很感激任何帮助。

完整的堆栈跟踪是：

未捕获的错误：找不到模块'react'o @ index.js?0f21:1(匿名函数)@index.js?0f21:1r.4.react@ index.js?0f21:1o@index.js?0f21:1(匿名函数)@index.

js?0f21:1r.2../I18nextProvider@index.js?0f21:1o@index.js?0f21:1e@ index.js?0f21:1（匿名函数）@ index.js?0f21:1c @ index.js?0f21:1(匿名函数)@index.js?0f21:1(匿名函数）@app.js:4127__webpack_require__@app.js:535fn@ app.js:76(匿名函数)@VM91841:35(匿名函数)@ index.js?9552:67(匿名函数)@index.js?9552:67(匿名函数）@app.js:1024__webpack_require__@app.js:535fn@ app.js:76(匿名函数)@app.js:567__webpack_require__@ app.js:535（匿名函数）@ app.js:558（匿名函数）@ 应用程序.js:561 客户端？8a21:22 [WDS] 启用热模块更换。

【问题讨论】：

您的错误是否带有堆栈跟踪？这将有助于准确找出问题所在:)
已添加。我看到那里提到了一些 _webpack_require，但不确定这是什么意思
啊，除非您enable source maps in webpack，否则这不会特别有用。 __webpack_require__ 是 webpack 提供的函数来替换你的包中的 require/import，所以似乎出于某种原因你的 i18n 库正在努力导入 React。
我刚刚看了react-i18next's dependencies，好像它不包含 React。这可能是 webpack 无法正确映射它的原因。我会在他们的 github 上提出一个问题，也许还有一个厚脸皮的 pull request 来解决它。
提高了an issue on GitHub 和accompanying PR。如果您想尝试我的分支，请将您的 package.json 更改为 "react-i18next": "jimmed/react-i18next#patch-1" 而不是当前版本，然后运行 npm i。

标签： reactjs react-router i18next redux-framework

【解决方案1】：

您是否需要对具有

的 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 会导致打包错误。

【讨论】：

你这是什么意思？我有一个import React from 'react' 声明 - 我在 OP 中提到
This test suite seems to suggest otherwise。我可能是错的。 webpack 代码库太疯狂了。
是的..您需要从顶部的 'react' 导入 React ...请参阅 babeljs.io/repl/… 这就是您的代码被转译的内容。使用例如。 eslint 它会警告你缺少反应。
是否可以使用嵌套提供程序？

【解决方案2】：

我从未从技术角度深入了解这个问题，因此重构为使用react-intl 来满足我的国际化需求。 redux 也适用于我。

【讨论】：