title: locale as URL parameter with ReactRouter v4 and redux
body: <p>I am building an multilingual application with React &amp; Redux using :</p>
  
  <pre><code>{
      "react": "16.2.0",
      "redux": "3.7.2",
      "react-redux": "^5.0.6",
      "react-router-redux": "^5.0.0-alpha.9",
      "react-router": "^4.2.0",
      "react-redux-i18n": "^1.9.1"
  }
  </code></pre>
  
  <p>SOLVED (using <code>path-to-regexp</code>) : <a href="https://codesandbox.io/s/307nz4p9nm" rel="nofollow noreferrer">https://codesandbox.io/s/307nz4p9nm</a></p>
  
  <p>EDIT : Finally able to render components. Last trouble is the path generation, for my language selectors.</p>
  
  <p>I am using a <code>&lt;ConnectedRouter /&gt;</code> relying on <code>createBrowserHistory()</code>.</p>
  
  <p>I have the following structure :</p>
  
  <pre><code>// containers/App.jsx
  &lt;div&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;NavLink to={`${match.url}/`}&gt;Home&lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;NavLink to={`${match.url}/ABC`}&gt;ABC&lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;NavLink to={`${match.url}/DEF`}&gt;DEF&lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;NavLink to={`${match.url}/GHI`}&gt;GHI&lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;NavLink to={`${match.url}/JKL`}&gt;JKL&lt;/NavLink&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div&gt;
          &lt;Router /&gt;
      &lt;/div&gt;
      &lt;footer&gt;
          &lt;Link to={ (???) }&gt;English&lt;/Link&gt;
          &lt;Link to={ (???) }&gt;French&lt;/Link&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  
  // containers/Router.jsx
  &lt;Switch&gt;
      &lt;Route exact path={`{match.url}/`} component={Home} /&gt;
      &lt;Route exact path={`{match.url}/abc`} component={AbcComponent} /&gt;
      &lt;Route exact path={`{match.url}/def`} component={DefComponent} /&gt;
      &lt;Route exact path={`{match.url}/ghi`} component={GhiComponent} /&gt;
      &lt;Route exact path={`{match.url}/jkl`} component={JklComponent} /&gt;
  &lt;/Switch&gt;
  
  // containers/RootContainer.jsx
  &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
          &lt;Switch&gt;
              &lt;Route path='/:locale(en|fr)' component={App} /&gt;
              &lt;Redirect to='/en' /&gt;
          &lt;/Switch&gt;
      &lt;/ConnectedRouter&gt;
  &lt;/Provider&gt;
  </code></pre>
  
  <p>Rendered this way :</p>
  
  <pre><code>const store = createStore(combineReducers({}))
  const history = createBrowserHistory()
  
  ReactDOM.render(
      &lt;RootContainer store={store} history={history} /&gt;,
      document.getElementById('app-container')
  )
  </code></pre>
  
  <p>Which result in the following URIs :</p>
  
  <pre><code>/
      /(en|fr)
          /abc
          /def
          /ghi
          /jkl
  </code></pre>
  
  <p>Now, I am looking for a way to implement my locale selectors : generate the path of the current page, just updating the <code>:locale</code> parameter.</p>
  
  <p>Whatever is the route I am currently visiting (<code>/en</code>, <code>/en/abc</code>), <code>match.path</code> always return <code>/:locale(en|fr)</code> and I never access the sub-path (eg. <code>/abc</code>) from my App component.</p>
  
  <p>Then how to hook <code>react-redux-i18n</code> to automatically take the locale from URL instead of managing it in its own state ?</p>