0

我正在做一个 i18n 实现。我有我的路线/:locale/rest/of/route，我想根据加载的语言环境传递字典。在路由配置上这样做会很酷。但我只能考虑在每个容器上这样做。但我的主要不确定性是代码重复。（在每个容器中this.props.dictionary[this.props.route.locale]）

是一种避免这种代码重复的方法吗？

这是我的配置文件：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { Router, Route, IndexRoute, Redirect } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { syncReduxAndRouter } from 'redux-simple-router'
import * as containers from './app/app/containers'
import AppUser from './app/app/AppUser'
import AppCompany from './app/app/AppCompany'
import { createStore, applyMiddleware } from 'redux'
import reducers from './app/app/reducers'

const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore)

const store = createStoreWithMiddleware(reducers)
const history = createBrowserHistory()

syncReduxAndRouter(history, store)

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/:lang" component={AppUser}>
        <IndexRoute component={containers.Landing} />

        <Route
          path="workflow"
          component={containers.Workflow} />

        <Route
          path="register"
          component={containers.Register} />

        <Route
          path="login"
          component={containers.Login} />

      </Route>
      <Redirect from="/" to="/en" />
      <Route path="/:lang/company" component={AppCompany}>

        <Route
          path="inbox"
          component={containers.Inbox} />

        <Route
          path="inbox/:caseId"
          component={containers.CaseDetail} />

      </Route>
      <Redirect from="/company/inbox" to="/en/company/inbox" />

    </Router>
  </Provider>,
  document.getElementById('root')
)
4

2 回答 2

0

最后最好的模式，所以我不必编辑每个容器是使用createElement组件中的属性Router

函数是这样的：

import React from 'react'

import i18n from '../../i18n'

const createElement = (Component, p) => {
  let dictionary = i18n[p.params.locale]
  if (dictionary == undefined) {
    dictionary = i18n['en']
  }
  return <Component {...p} dictionary={dictionary} />
}

export default createElement

最后在您的 index.js 或您的路线文件中：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { Router, Route, IndexRoute, Redirect } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { syncReduxAndRouter } from 'redux-simple-router'
import * as containers from './app/app/containers'
import AppUser from './app/app/AppUser'
import AppCompany from './app/app/AppCompany'
import reducers from './app/app/reducers'
import createElement from './app/app/createElement'

const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore)

const store = createStoreWithMiddleware(reducers)
const history = createBrowserHistory()

syncReduxAndRouter(history, store)

ReactDOM.render(
  <Provider store={store}>
    <Router history={history} createElement={createElement}> <-- NOTICE THIS LINE!!
      <Route path="/:locale" component={AppUser}>

        <IndexRoute component={containers.Landing} />

        <Route
          path="workflow"
          component={containers.Workflow} />

        <Route
          path="register"
          component={containers.Register} />

        <Route
          path="login"
          component={containers.Login} />

      </Route>
      <Redirect from="/" to="/es" />
      <Route path="/:locale/company" component={AppCompany}>

        <Route
          path="inbox"
          component={containers.Inbox} />

        <Route
          path="inbox/:caseId"
          component={containers.CaseDetail} />

      </Route>
      <Redirect from="/company/inbox" to="/es/company/inbox" />

    </Router>
  </Provider>,
  document.getElementById('root')
);
于 2016-02-03T19:33:08.930 回答
0

由于您正在使用redux，因此您可以在组件上使用react-redux's并实现类似的东西并使用.connectcontainerthis.props.currentDictionary

function mapStateToProps(state, ownProps) {
    return {
        currentDictionary: state.dictionary[ownProps.route.locale]
    }
}

export default connect(mapStateToProps)(Container);
于 2016-02-03T16:17:00.960 回答