diff --git a/src/app.js b/src/app.js
index 7cee3a7f..b032c8fb 100644
--- a/src/app.js
+++ b/src/app.js
@@ -7,19 +7,23 @@ import { IntlProvider, addLocaleData } from 'react-intl';
 import en from 'react-intl/locale-data/en';
 import configureStore from './store';
 import Routes from './Routes';
-import routesConfiguration from './routesConfiguration';
+import { RoutesProvider } from './components';
+import routesConfiguration, { flattenRoutes } from './routesConfiguration';
 import localeData from './translations/en.json';
 
 export const ClientApp = props => {
   const { store } = props;
   addLocaleData([...en]);
+  const flattenedRoutes = flattenRoutes(routesConfiguration);
   return (
     <IntlProvider locale="en" messages={localeData}>
-      <BrowserRouter>
-        <Provider store={store}>
-          <Routes routes={routesConfiguration} />
-        </Provider>
-      </BrowserRouter>
+      <Provider store={store}>
+        <RoutesProvider routes={routesConfiguration}>
+          <BrowserRouter>
+            <Routes routes={flattenedRoutes} />
+          </BrowserRouter>
+        </RoutesProvider>
+      </Provider>
     </IntlProvider>
   );
 };
@@ -31,13 +35,16 @@ ClientApp.propTypes = { store: any.isRequired };
 export const ServerApp = props => {
   const { url, context, store } = props;
   addLocaleData([...en]);
+  const flattenedRoutes = flattenRoutes(routesConfiguration);
   return (
     <IntlProvider locale="en" messages={localeData}>
-      <StaticRouter location={url} context={context}>
-        <Provider store={store}>
-          <Routes routes={routesConfiguration} />
-        </Provider>
-      </StaticRouter>
+      <Provider store={store}>
+        <RoutesProvider routes={routesConfiguration}>
+          <StaticRouter location={url} context={context}>
+            <Routes routes={flattenedRoutes} />
+          </StaticRouter>
+        </RoutesProvider>
+      </Provider>
     </IntlProvider>
   );
 };