diff --git a/src/components/appRouter.js b/src/components/appRouter.js
index cfc04b1fe7..6d189a13d9 100644
--- a/src/components/appRouter.js
+++ b/src/components/appRouter.js
@@ -11,6 +11,7 @@ import viewManager from './viewManager/viewManager';
import Dashboard from '../scripts/clientUtils';
import ServerConnections from './ServerConnections';
import alert from './alert';
+import reactControllerFactory from './reactControllerFactory';
class AppRouter {
allRoutes = [];
@@ -341,7 +342,9 @@ class AppRouter {
this.sendRouteToViewManager(ctx, next, route, controllerFactory);
};
- if (route.controller) {
+ if (route.pageComponent) {
+ onInitComplete(reactControllerFactory);
+ } else if (route.controller) {
import('../controllers/' + route.controller).then(onInitComplete);
} else {
onInitComplete();
@@ -373,6 +376,7 @@ class AppRouter {
fullscreen: route.fullscreen,
controllerFactory: controllerFactory,
options: {
+ pageComponent: route.pageComponent,
supportsThemeMedia: route.supportsThemeMedia || false,
enableMediaControl: route.enableMediaControl !== false
},
diff --git a/src/components/pages/TestPage.js b/src/components/pages/TestPage.js
new file mode 100644
index 0000000000..2d42091612
--- /dev/null
+++ b/src/components/pages/TestPage.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TestPage = () => (
+
Hello from React!
+);
+
+export default TestPage;
diff --git a/src/components/reactControllerFactory.js b/src/components/reactControllerFactory.js
new file mode 100644
index 0000000000..22aa48b388
--- /dev/null
+++ b/src/components/reactControllerFactory.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// TODO: Probably need to rehydrate on view restores
+
+export default (view, params, { detail }) => {
+ if (detail.options?.pageComponent) {
+ import(/* webpackChunkName: "[request]" */ `./pages/${detail.options.pageComponent}`)
+ .then(({ default: component }) => {
+ ReactDOM.render(React.createElement(component), view);
+ });
+ }
+};
diff --git a/src/components/viewManager/viewManager.js b/src/components/viewManager/viewManager.js
index 22faa3a3bd..501bd928ae 100644
--- a/src/components/viewManager/viewManager.js
+++ b/src/components/viewManager/viewManager.js
@@ -21,9 +21,9 @@ viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
newView.initComplete = true;
if (typeof options.controllerFactory === 'function') {
- new options.controllerFactory(newView, eventDetail.detail.params);
+ new options.controllerFactory(newView, eventDetail.detail.params, eventDetail);
} else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
- new options.controllerFactory.default(newView, eventDetail.detail.params);
+ new options.controllerFactory.default(newView, eventDetail.detail.params, eventDetail);
}
if (!options.controllerFactory || dispatchPageEvents) {
diff --git a/src/controllers/reactTest.html b/src/controllers/reactTest.html
new file mode 100644
index 0000000000..a0cbc97a91
--- /dev/null
+++ b/src/controllers/reactTest.html
@@ -0,0 +1 @@
+
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index f9968a1fdf..7b78dff1e9 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -24,6 +24,12 @@ import { appRouter } from '../components/appRouter';
appRouter.addRoute(path, newRoute);
}
+ defineRoute({
+ alias: '/reactTest.html',
+ path: 'reactTest.html',
+ pageComponent: 'TestPage'
+ });
+
defineRoute({
alias: '/addserver.html',
path: 'session/addServer/index.html',