Merge pull request #5 from FriendsOfECMAScript/feature/router-components

Added missing React Router components

Author: benatespina

CHANGELOG.md

@@ -3,8 +3,10 @@
 This changelog references the relevant changes done between versions.
 
 To get the diff for a specific change, go to https://github.com/FriendsOfECMAScript/ReactI18nRouting/commit/XXX where XXX is the change hash 
-To get the diff between two versions, go to https://github.com/FriendsOfECMAScript/ReactI18nRouting/compare/v0.2.0...v0.3.0
+To get the diff between two versions, go to https://github.com/FriendsOfECMAScript/ReactI18nRouting/compare/v0.3.0...v0.4.0
 
+* 0.4.0
+    * Added `FormattedRedirect` and `FormattedNavLink` components.
 * 0.3.0
     * Added License, Travis and other useful files to make the library more compliant with OSS.
     * Decoupled `BrowserIntlProvider` from Redux, allowing other implementations like `LocalStorage` or `InMemory`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foes/react-i18n-routing",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "description": "Provides components and functions to make i18n routing React apps with ease.",
   "keywords": [

src/component/FormattedLink.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import {Link, NavLink, Redirect} from 'react-router-dom';
+import {injectIntl} from 'react-intl';
+
+const FormattedRouter = ({intl, children}) => {
+  if (!intl.formats.formatIntlRoute) {
+    throw new Error(
+      'LanguageStrategy formatter is missing, pass formatIntlRoute ' +
+        'as parameter to IntlProvider or to BrowserIntlProvider',
+    );
+  }
+
+  return children;
+};
+
+export const FormattedRedirect = injectIntl(
+  ({name, params, intl, locale, ...rest}) => {
+    return (
+      <FormattedRouter intl={intl}>
+        <Redirect
+          to={intl.formats.formatIntlRoute(
+            name,
+            params,
+            locale ? locale : intl.locale,
+          )}
+          {...rest}
+        />
+      </FormattedRouter>
+    );
+  },
+);
+
+export const FormattedNavLink = injectIntl(
+  ({name, params, intl, locale, ...rest}) => {
+    return (
+      <FormattedRouter intl={intl}>
+        <NavLink
+          to={intl.formats.formatIntlRoute(
+            name,
+            params,
+            locale ? locale : intl.locale,
+          )}
+          {...rest}
+        />
+      </FormattedRouter>
+    );
+  },
+);
+
+export const FormattedLink = injectIntl(
+  ({name, params, intl, locale, ...rest}) => {
+    return (
+      <FormattedRouter intl={intl}>
+        <Link
+          to={intl.formats.formatIntlRoute(
+            name,
+            params,
+            locale ? locale : intl.locale,
+          )}
+          {...rest}
+        />
+      </FormattedRouter>
+    );
+  },
+);

src/component/FormattedReactRouter.js

@@ -5,7 +5,11 @@ import ReduxBrowserIntlProvider, {
   i18nReducer,
   LANGUAGE_CHANGE,
 } from './component/bridges/ReduxBrowserIntlProvider.js';
-import FormattedLink from './component/FormattedLink.js';
+import {
+  FormattedLink,
+  FormattedNavLink,
+  FormattedRedirect,
+} from './component/FormattedReactRouter.js';
 import defaultUnPrefixed from './languageStrategy/defaultUnprefixed.js';
 import subdomainBased from './languageStrategy/subdomainBased.js';
 import renderTranslatedRoutes from './renderTranslatedRoutes.js';
@@ -19,6 +23,8 @@ export {
   i18nReducer,
   LANGUAGE_CHANGE,
   FormattedLink,
+  FormattedNavLink,
+  FormattedRedirect,
   defaultUnPrefixed,
   subdomainBased,
   renderTranslatedRoutes,