reactjs - react-css-modules を react-router とロケールおよび webpack で使用すると、「CSS モジュールが未定義です」というエラーが表示されます

Question

私はreact-routerとCSS-modulesとwebpackでreactを使用しています。これはすべてうまく機能していましたが、言語を変更できるようにするための要件が​​発生しました。最初に状態属性を別の言語に変更するだけでこれを実行しようとしましたが、それを変更すると現在のルートは再レンダリングされないため、言語の変更は次のルート変更が発生したとき、つまりリンクをクリックしたときにのみ有効になります。

プラン B: ロケールをルーティングに追加しようとしている / そのため、URL に表示されるようになりました。これは、ルートの更新 -> 再レンダリングにより有効になるはずです。ただし、CSS モジュールをロードするとエラーが発生します。

これは私のルーター設定です：

<Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRedirect to="/english/hydraulics" />
      <Route path="/:lang">
        <IndexRedirect to="/hydraulics" />
        <Route path="/" component={Hydraulics}/>
        <Route path="hydraulics" component={Hydraulics}/>
        <Route path="bearings" component={Bearings}/>
        <Route path="compressor" component={Compressor}/>
        <Route path="gears" component={Gears}/>
      </Route>
    </Route>
  </Router>

これは私のアプリでの私の機能です:

constructor(props) {
    super(props);

    this._updateLanguage = this._updateLanguage.bind(this);
  }

  componentWillMount() {
    this.setState({
      lang: 'english',
      language: english
    })
  }

  _updateLanguage(language) {
    this.setState({
      language: language === ENGLISH ? english : russian
    });
  }

  _addChildren() {
    return this.props.children ? React.cloneElement(this.props.children, {language: this.state.language}) : this.props.children;
  }

  render() {

    var language = this.state.language;
    var children = this.props.children;

    return <div className={wrapper}>
        <Nav copy={this.state.language} location={this.props.location} callback={this._updateLanguage} locale={this.state.lang}/>
        <section className={content}>
          { this._addChildren() }
        </section>
      </div>
  }

私のデフォルトのルートは油圧なので、エラーが発生しています：

キャッチされないエラー: 「is-english/hydraulics」CSS モジュールが定義されていません。

私のwebpack cssモジュールローダーの構成なのだろうか：

{
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
      },

水力学.jsx で、次のように CSS をインポートしています。

import styles from './hydraulics.css';

私が理解していないのは、css モジュールが「is-english」からロードされる理由です。その「is-」プレフィックスはどこから来ているのですか? また、ファイルは英語のサブフォルダーにはなく、水力学.jsx と同じフォルダーにあります。

それとも、ルートの配置方法と関係があるのでしょうか?