Inject a router if needed

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

packages/core/src/api-wrappers/createApp.test.tsx

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { defaultConfigLoader } from './createApp';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+import { defaultConfigLoader, OptionallyWrapInRouter } from './createApp';
 
 (process as any).env = { NODE_ENV: 'test' };
 const anyEnv = process.env as any;
@@ -92,3 +95,23 @@ describe('defaultConfigLoader', () => {
     ]);
   });
 });
+
+describe('OptionallyWrapInRouter', () => {
+  it('should wrap with router if not yet inside a router', async () => {
+    const { getByText } = render(
+      <OptionallyWrapInRouter>Test</OptionallyWrapInRouter>,
+    );
+
+    expect(getByText('Test')).toBeInTheDocument();
+  });
+
+  it('should not wrap with router if already inside a router', async () => {
+    const { getByText } = render(
+      <MemoryRouter>
+        <OptionallyWrapInRouter>Test</OptionallyWrapInRouter>
+      </MemoryRouter>,
+    );
+
+    expect(getByText('Test')).toBeInTheDocument();
+  });
+});

packages/core/src/api-wrappers/createApp.tsx

@@ -14,14 +14,18 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import privateExports, {
   AppOptions,
   defaultSystemIcons,
   BootErrorPageProps,
   AppConfigLoader,
 } from '@backstage/core-api';
-import { BrowserRouter, MemoryRouter } from 'react-router-dom';
+import {
+  BrowserRouter,
+  MemoryRouter,
+  useInRouterContext,
+} from 'react-router-dom';
 import LightIcon from '@material-ui/icons/WbSunny';
 import DarkIcon from '@material-ui/icons/Brightness2';
 import { ErrorPage } from '../layout/ErrorPage';
@@ -89,6 +93,13 @@ export const defaultConfigLoader: AppConfigLoader = async (
 // The actual implementation of the app class still lives in core-api,
 // as it needs to be used by dev- and test-utils.
 
+export function OptionallyWrapInRouter({ children }: PropsWithChildren<{}>) {
+  if (useInRouterContext()) {
+    return <>{children}</>;
+  }
+  return <MemoryRouter>{children}</MemoryRouter>;
+}
+
 /**
  * Creates a new Backstage App.
  */
@@ -97,32 +108,18 @@ export function createApp(options?: AppOptions) {
     <ErrorPage status="404" statusMessage="PAGE NOT FOUND" />
   );
   const DefaultBootErrorPage = ({ step, error }: BootErrorPageProps) => {
-    switch (step) {
-      case 'load-config':
-        // TODO: figure out a nicer way to handle routing on the error page, when it can be done.
-        return (
-          <MemoryRouter>
-            <ErrorPage
-              status="501"
-              statusMessage={`The configuration failed to load, someone should have a look at this error: ${error.message}`}
-            />
-          </MemoryRouter>
-        );
-      case 'load-chunk':
-        return (
-          <ErrorPage
-            status="501"
-            statusMessage={`Lazy loaded chunk failed to load, try to reload the page: ${error.message}`}
-          />
-        );
-      default:
-        // TODO: figure out a nicer way to handle routing on the error page, when it can be done.
-        return (
-          <MemoryRouter>
-            <ErrorPage status="501" statusMessage="" />
-          </MemoryRouter>
-        );
+    let message = '';
+    if (step === 'load-config') {
+      message = `The configuration failed to load, someone should have a look at this error: ${error.message}`;
+    } else if (step === 'load-chunk') {
+      message = `Lazy loaded chunk failed to load, try to reload the page: ${error.message}`;
     }
+    // TODO: figure out a nicer way to handle routing on the error page, when it can be done.
+    return (
+      <OptionallyWrapInRouter>
+        <ErrorPage status="501" statusMessage={message} />
+      </OptionallyWrapInRouter>
+    );
   };
 
   const apis = options?.apis ?? [];