3

我正在使用 react-router 和 CSS-modules 和 webpack。这一切都很好，但现在需要能够更改语言。我首先尝试通过仅将状态属性更改为不同的语言来做到这一点，但是当更改它时，当前路由不会重新呈现，因此语言更改只会在下一次路由更改发生时生效，即单击链接。

计划 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]')
      },

在hydraulics.jsx中，我像这样导入CSS：

import styles from './hydraulics.css';

我不明白的是为什么css模块是从“is-english”加载的，“is-”前缀来自哪里？此外，该文件不在英文子文件夹中，它与液压系统.jsx 在同一个文件夹中

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

4

0 回答 0