Question

我正在进行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')
)

Answer 1

由于您正在使用redux，因此您可以在react-redux组件上使用connect container并实施类似的内容并访问带有this.props.currentDictionary的字典。

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

export default connect(mapStateToProps)(Container);

Answer 2

最后，最好的模式，所以我不必编辑每个容器就是使用组件Activity中的属性Intent intent = getIntent(); int k = intent.getIntExtra("idnumber", 1);

功能如下：

createElement

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

Router

react-router，访问配置中的路由参数

2 个答案: