[fix] use history@4 with react-router@5

electrode-io · Jan 11, 2021 · 3fa593c · 3fa593c
1 parent 41331f1
commit 3fa593c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/packages/xarc-react-router/package.json b/packages/xarc-react-router/package.json
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@xarc/subapp": "^0.1.1",
-    "history": "^5.0.0",
+    "history": "^4.10.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "tslib": "^2.1.0"

diff --git a/packages/xarc-react-router/src/browser/react-router-browser.tsx b/packages/xarc-react-router/src/browser/react-router-browser.tsx
@@ -1,5 +1,5 @@
 import { SubAppDef, SubAppFeatureFactory } from "@xarc/subapp";
-import { BrowserRouter } from "react-router-dom";
+import { Router, BrowserRouter } from "react-router-dom";
 import { createBrowserHistory } from "history";
 
 import { ReactRouterFeatureOptions, _id, _subId } from "../common";
@@ -17,7 +17,15 @@ export function reactRouterFeature(options: ReactRouterFeatureOptions): SubAppFe
     id,
     subId,
     add(subapp: SubAppDef) {
-      const history = options.history || createBrowserHistory();
+      let history: any;
+      let TheRouter: any;
+
+      if (!options.history) {
+        TheRouter = BrowserRouter;
+      } else {
+        history = options.history === true ? createBrowserHistory() : options.history;
+        TheRouter = Router;
+      }
 
       subapp._features.reactRouter = {
         id,
@@ -27,9 +35,9 @@ export function reactRouterFeature(options: ReactRouterFeatureOptions): SubAppFe
           return {
             Component: (props: any) => {
               return (
-                <BrowserRouter history={history}>
+                <TheRouter history={history}>
                   <Component {...props} />
-                </BrowserRouter>
+                </TheRouter>
               );
             }
           };

diff --git a/packages/xarc-react-router/src/common/index.ts b/packages/xarc-react-router/src/common/index.ts
@@ -9,11 +9,13 @@ export type ReactRouterFeatureOptions = {
    */
   React: any;
   /**
-   * The browser history object.
+   * The browser history object - custom browser history object and control which Router to use.
    *
-   * Default to create with createBrowserHistory from https://www.npmjs.com/package/history
+   * - If it's falsy, then `BrowserRouter` will be used.
+   * - If it's `true`, then `Router` is used with history from `createBrowserHistory` from https://www.npmjs.com/package/history
+   * - Otherwise it's assumed to be a history object and `Router` will be used with it.
    */
-  history?: BrowserHistory<object>; // eslint-disable-line @typescript-eslint/ban-types
+  history?: boolean | BrowserHistory<object>; // eslint-disable-line @typescript-eslint/ban-types
 };
 
 export const _id = "router-provider";