react-router, access a route param in the config

Question

i'm doing an i18n implementation. I have my routes like /:locale/rest/of/route and i want to pass the dictionary depending on which locale is loaded. This would be cool to do it on the routes configuration. But i can only think on doing this on every container. But my main uncertainty is the code duplication. (in each container this.props.dictionary[this.props.route.locale])

Is a way to avoid this code duplication?

Here is my config file:

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')
)

score 0 · Answer 1 · answered Feb 03 '16 at 16:17

0

Since you're using redux, you can use react-redux's connect on your container component and implement something like this and access the dictionary with this.props.currentDictionary.

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

export default connect(mapStateToProps)(Container);

answered Feb 03 '16 at 16:17

oobgam

1,259
8
10

the bad thing about this is that i need to do this on every container, is there a way to do this just once? – Nico Feb 03 '16 at 17:18

score 0 · Answer 2 · answered Feb 03 '16 at 19:33

Finally the best pattern, so i don't have to edit every container is to use the property createElement from the component Router

The function goes like this:

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

And finally in your index.js or your routes file:

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')
);

react-router, access a route param in the config

2 Answers2