diff --git a/www/front_src/src/App.js b/www/front_src/src/App.js
index 7901e2f195e..a5e404c4dcc 100755
--- a/www/front_src/src/App.js
+++ b/www/front_src/src/App.js
@@ -1,16 +1,14 @@
 import React, { Component } from "react";
 import Header from "./components/header";
-import { Switch, Route } from "react-router-dom";
 import { connect } from 'react-redux';
 import { ConnectedRouter } from "react-router-redux";
 import { history } from "./store";
-import ReactRouter from "./components/reactRouter";
-import LegacyRoute from "./route-components/legacyRoute";
 
 import NavigationComponent from "./components/navigation";
 import Tooltip from "./components/tooltip";
 import Footer from "./components/footer";
 import Fullscreen from 'react-fullscreen-crossbrowser';
+import MainRouter from './components/mainRouter';
 import queryString from 'query-string';
 import axios from './axios';
 
@@ -115,11 +113,7 @@ class App extends Component {
                 onChange={isFullscreenEnabled => this.setState({isFullscreenEnabled})}
               >
                 <div className={styles["main-content"]}>
-                  <Switch>
-                    <Route path="/main.php" exact component={LegacyRoute}/>
-                    <Route path="/" exact render={() => (<Redirect to="/main.php"/>)}/>
-                    <Route path="/" component={ReactRouter}/>
-                  </Switch>
+                  <MainRouter />
                 </div>
               </Fullscreen>
             </div>
diff --git a/www/front_src/src/components/mainRouter/index.js b/www/front_src/src/components/mainRouter/index.js
new file mode 100644
index 00000000000..2bfaac23259
--- /dev/null
+++ b/www/front_src/src/components/mainRouter/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Switch, Route, withRouter } from 'react-router-dom';
+import ReactRouter from '../reactRouter';
+import LegacyRoute from '../../route-components/legacyRoute';
+
+// main router to handle switch between legacy routes and react pages
+// legacy route has a key to make it fully uncontrolled
+// (https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key)
+// it allows to reconstruct the component to display loading animation
+const MainRouter = ({ history: { location: { key } } }) => (
+  <Switch>
+    <Route key={`path-${key}`} path="/main.php" exact component={LegacyRoute}/>
+    <Route path='/' exact render={() => (<Redirect to='/main.php'/>)}/>
+    <Route path='/' component={ReactRouter}/>
+  </Switch>
+);
+
+export default withRouter(MainRouter);
diff --git a/www/front_src/src/route-components/legacyRoute/index.js b/www/front_src/src/route-components/legacyRoute/index.js
index 2898b0f7554..55f24aad021 100644
--- a/www/front_src/src/route-components/legacyRoute/index.js
+++ b/www/front_src/src/route-components/legacyRoute/index.js
@@ -38,6 +38,7 @@ class LegacyRoute extends Component {
 
   handleHref = event => {
     let href = event.detail.href;
+
     // update route
     window.history.pushState(null, null, href);
   }
@@ -49,10 +50,10 @@ class LegacyRoute extends Component {
   }
 
   componentDidMount() {
-    this.mainContainer = window.parent.document.getElementById('fullscreen-wrapper');
+    this.mainContainer = window.document.getElementById('fullscreen-wrapper');
 
     // add a listener on global page size
-    window.parent.addEventListener(
+    window.addEventListener(
       "resize",
       this.handleResize
     );
@@ -74,17 +75,17 @@ class LegacyRoute extends Component {
 
   componentWillUnmount() {
     clearTimeout(this.resizeTimeout);
-    window.parent.removeEventListener(
+    window.removeEventListener(
       "resize",
       this.handleResize
     );
 
-    window.parent.removeEventListener(
+    window.removeEventListener(
       "react.href.update",
       this.handleHref
     );
 
-    window.parent.removeEventListener(
+    window.removeEventListener(
       "react.href.disconnect",
       this.handleDisconnect
     );
@@ -92,14 +93,15 @@ class LegacyRoute extends Component {
 
   render() {
     const { contentHeight, loading } = this.state;
-    const { history } = this.props,
-          { search, hash } = history.location;
+    const { history: { location: { search, hash } } } = this.props;
+
     let params;
     if (window['fullscreenSearch']) {
       params = window['fullscreenSearch'] + window['fullscreenHash']
     } else {
       params = (search || '') + (hash || '');
     }
+
     return (
       <>
         {loading &&
diff --git a/www/front_src/src/route-components/module/index.js b/www/front_src/src/route-components/module/index.js
deleted file mode 100755
index 1fcef239bce..00000000000
--- a/www/front_src/src/route-components/module/index.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { Component } from "react";
-import classnames from 'classnames';
-import styles from '../../components/header/header.scss';
-import loaderStyles from '../../components/loader/loader.scss';
-import Loader from "../../components/loader";
-
-
-class ModuleRoute extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.mainContainer = null;
-    this.resizeTimeout = null;
-
-    this.state = {
-      contentHeight: 0,
-      loading: true
-    }
-  }
-
-  handleResize = () => {
-    // wait size is the same during 200ms to handle it
-    clearTimeout(this.resizeTimeout);
-
-    if (this.mainContainer) {
-      this.resizeTimeout = setTimeout(() => {
-        const { clientHeight } = this.mainContainer;
-        const { contentHeight } = this.state;
-        if (clientHeight != contentHeight) {
-          this.setState({
-            loading: false,
-            contentHeight: clientHeight - 30
-          });
-        }
-      }, 200);
-    }
-  }
-
-  handleHref = event => {
-    let href = event.detail.href;
-    // update route
-    window.history.pushState(null, null, href);
-  }
-
-  // handle disconnect event sent by iframe
-  handleDisconnect = event => {
-    // update current url to redirect to login page
-    window.location.href = event.detail.href;
-  }
-
-  componentDidMount() {
-    this.mainContainer = window.parent.document.getElementById('fullscreen-wrapper');
-
-    // add a listener on global page size
-    window.parent.addEventListener(
-      "resize",
-      this.handleResize
-    );
-
-    // add event listener to update page url
-    window.addEventListener(
-      "react.href.update",
-      this.handleHref,
-      false
-    );
-
-    // add event listener to check if iframe is redirected to login page
-    window.addEventListener(
-      "react.href.disconnect",
-      this.handleDisconnect,
-      false
-    );
-  };
-
-  componentWillUnmount() {
-    clearTimeout(this.resizeTimeout);
-    window.parent.removeEventListener(
-      "resize",
-      this.handleResize
-    );
-
-    window.parent.removeEventListener(
-      "react.href.update",
-      this.handleHref
-    );
-
-    window.parent.removeEventListener(
-      "react.href.disconnect",
-      this.handleDisconnect
-    );
-  }
-
-  render() {
-    const { contentHeight, loading } = this.state;
-    const { history } = this.props,
-          { search, hash } = history.location;
-    let params;
-    if (window['fullscreenSearch']) {
-      params = window['fullscreenSearch'] + window['fullscreenHash']
-    } else {
-      params = (search || '') + (hash || '');
-    }
-    return (
-      <>
-        {loading &&
-          <span className={loaderStyles["main-loader"]}>
-            <Loader />
-          </span>
-        }
-        <iframe
-          id="main-content"
-          title="Main Content"
-          frameBorder="0"
-          onLoad={this.handleResize}
-          scrolling="yes"
-          className={classnames({[styles["hidden"]]: loading})}
-          style={{ width: "100%", height: `${contentHeight}px` }}
-          src={`./main.get.php${params}`}
-        />
-      </>
-    );
-  }
-}
-
-export default ModuleRoute;
\ No newline at end of file