Question

我正在使用react-react和CSS-modules以及webpack做出反应。这一切都很好，但现在已经有了改变语言的要求。我首先尝试通过仅将状态属性更改为不同的语言来做到这一点，但是当更改它时，当前路由不会重新渲染，因此语言更改只会在下一次路由更改发生时生效，即单击链接。

计划B：尝试将区域设置添加到路由/因此它现在显示在URL中，然后该路由应该生效，因为路由更新 - ＆gt;重新呈现。但是我现在加载我的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>
  }

我的默认路线是液压，所以我收到错误：

未捕捉错误：＆＃34; is-english / hydraulics＆＃34; CSS模块未定义。

我想知道它是否是我的webpack css模块加载器中的配置：

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

在hydraulics.jsx中的

我正在导入这样的CSS：

import styles from './hydraulics.css';

我不明白为什么css模块是从＃34; is-english＆＃34;加载的，其中＆＃34;是 - ＆＃34;前缀来自？此文件也不在英文子文件夹中，它与hydraulics.jsx位于同一文件夹中

或者它是否与路线安排的方式有关？

＆＃34; CSS模块未定义＆＃34;将react-css-modules与react-router与locale和webpack一起使用时出错

0 个答案: