diff --git a/package.json b/package.json
index 6219f689..367c8051 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
         "react-autocomplete": "1.8.1",
         "react-form": "^2.16.0",
         "react-helmet": "^6.1.0",
-        "react-router-dom": "^4.2.2",
+        "react-router-dom": "^6.20.0",
         "react-toastify": "9.0.8",
         "rxjs": "^7.8.1",
         "typescript": "^4.9.5",
diff --git a/src/context.tsx b/src/context.tsx
index 7da29d89..c5244536 100644
--- a/src/context.tsx
+++ b/src/context.tsx
@@ -1,5 +1,5 @@
 import * as H from 'history';
-import { match} from 'react-router';
+import { UIMatch} from 'react-router';
 import { NotificationsApi, PopupApi } from './components';
 
 export interface AppContext {
@@ -7,7 +7,7 @@ export interface AppContext {
         history: H.History;
         route: {
             location: H.Location;
-            match: match<any>;
+            match: UIMatch<any>;
         };
     };
     apis: {
diff --git a/stories/page.tsx b/stories/page.tsx
index b708c51b..b21df661 100644
--- a/stories/page.tsx
+++ b/stories/page.tsx
@@ -1,8 +1,7 @@
 import { Store, withState } from '@dump247/storybook-state';
 import { storiesOf } from '@storybook/react';
-import createHistory from 'history/createBrowserHistory';
 import * as React from 'react';
-import { Route, Router } from 'react-router';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { timer } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -46,8 +45,6 @@ const actionMenu = {
     }],
 };
 
-const history = createHistory();
-
 function ensureSelected(vals: string[], selected: string[]): string[] {
     const res = new Set(selected);
     vals.forEach((item) => res.add(item));
@@ -56,100 +53,110 @@ function ensureSelected(vals: string[], selected: string[]): string[] {
 
 storiesOf('Page', module)
     .add('default',  withState({ selectedFilter: [] })(({store}: { store: Store<any> }) => (
-        <Router history={history}>
-            <Route path={location.pathname}>
-                <Layout navItems={navItems}>
-                    <Page title='Hello world!' toolbar={{ breadcrumbs, actionMenu, filter: {
-                        items: [
-                            { content: (changeSelection) => (
-                                <React.Fragment>
-                                    Filter type one: <a onClick={() => changeSelection(ensureSelected(['1', '2'], store.state.selectedFilter))}>all</a>
-                                </React.Fragment>
-                            )},
-                            {label: 'filter 1', value: '1' },
-                            {label: 'filter 2', value: '2' },
-                            { content: (changeSelection) => (
-                                <React.Fragment>
-                                    Filter type two: <a onClick={() => changeSelection(ensureSelected(['3', '4'], store.state.selectedFilter))}>all</a>
-                                </React.Fragment>
-                            )},
-                            {label: 'filter 3', value: '3' },
-                            {label: 'filter 4', value: '4' },
-                        ],
-                        selectedValues: store.state.selectedFilter,
-                        selectionChanged: (vals) => {
-                            store.set({ selectedFilter: vals });
-                        },
-                    }}}>
-                        <div style={{padding: '1em'}}>
-                            <div className='white-box'>
-                                Hello world!
+        <BrowserRouter>
+            <Routes>
+                <Route path={location.pathname}>
+                    <Layout navItems={navItems}>
+                        <Page title='Hello world!' toolbar={{ breadcrumbs, actionMenu, filter: {
+                            items: [
+                                { content: (changeSelection) => (
+                                    <React.Fragment>
+                                        Filter type one: <a onClick={() => changeSelection(ensureSelected(['1', '2'], store.state.selectedFilter))}>all</a>
+                                    </React.Fragment>
+                                )},
+                                {label: 'filter 1', value: '1' },
+                                {label: 'filter 2', value: '2' },
+                                { content: (changeSelection) => (
+                                    <React.Fragment>
+                                        Filter type two: <a onClick={() => changeSelection(ensureSelected(['3', '4'], store.state.selectedFilter))}>all</a>
+                                    </React.Fragment>
+                                )},
+                                {label: 'filter 3', value: '3' },
+                                {label: 'filter 4', value: '4' },
+                            ],
+                            selectedValues: store.state.selectedFilter,
+                            selectionChanged: (vals) => {
+                                store.set({ selectedFilter: vals });
+                            },
+                        }}}>
+                            <div style={{padding: '1em'}}>
+                                <div className='white-box'>
+                                    Hello world!
+                                </div>
                             </div>
-                        </div>
-                    </Page>
-                </Layout>
-            </Route>
-        </Router>
+                        </Page>
+                    </Layout>
+                </Route>
+            </Routes>
+        </BrowserRouter>
     ))).add('dynamic toolbar', () => (
-        <Router history={history}>
-            <Route path={location.pathname}>
-                <Layout navItems={navItems}>
-                    <Page title='Hello world!' toolbar={timer(0, 1000).pipe(map(() => ({ breadcrumbs: [{title: 'hello ' + new Date().toLocaleTimeString()}] })))}>
-                        <div style={{padding: '1em'}}>
-                            <div className='white-box'>
-                                Hello world!
+        <BrowserRouter>
+            <Routes>
+                <Route path={location.pathname}>
+                    <Layout navItems={navItems}>
+                        <Page title='Hello world!' toolbar={timer(0, 1000).pipe(map(() => ({ breadcrumbs: [{title: 'hello ' + new Date().toLocaleTimeString()}] })))}>
+                            <div style={{padding: '1em'}}>
+                                <div className='white-box'>
+                                    Hello world!
+                                </div>
                             </div>
-                        </div>
-                    </Page>
-                </Layout>
-            </Route>
-        </Router>
+                        </Page>
+                    </Layout>
+                </Route>
+            </Routes>
+        </BrowserRouter>
     )).add('compact nav bar', () => {
         const manyNavItems = [];
         for (let i = 0; i < 10; i++) {
             manyNavItems.push({ path: location.pathname + '/' + i, title: 'Sample', iconClassName: 'argo-icon-docs' });
         }
         return (
-            <Router history={history}>
+            <BrowserRouter>
+                <Routes>
+                    <Route path={location.pathname}>
+                        <Layout navItems={manyNavItems}>
+                            <Page title='Hello world!'>
+                                <div style={{padding: '1em'}}>
+                                    <div className='white-box'>
+                                        Hello world!
+                                    </div>
+                                </div>
+                            </Page>
+                        </Layout>
+                    </Route>
+                </Routes>
+            </BrowserRouter>
+        );
+    }).add('custom top bar title', () => (
+        <BrowserRouter>
+            <Routes>
                 <Route path={location.pathname}>
-                    <Layout navItems={manyNavItems}>
-                        <Page title='Hello world!'>
+                    <Layout navItems={navItems}>
+                        <Page title='helmet title' topBarTitle='Top Bar Title' toolbar={{ breadcrumbs: [{title: 'Apps ' , path: '/applications'}, {title: 'app name'}] }}>
                             <div style={{padding: '1em'}}>
                                 <div className='white-box'>
-                                    Hello world!
+                                    Test
                                 </div>
                             </div>
                         </Page>
                     </Layout>
                 </Route>
-            </Router>
-        );
-    }).add('custom top bar title', () => (
-        <Router history={history}>
-            <Route path={location.pathname}>
-                <Layout navItems={navItems}>
-                    <Page title='helmet title' topBarTitle='Top Bar Title' toolbar={{ breadcrumbs: [{title: 'Apps ' , path: '/applications'}, {title: 'app name'}] }}>
-                        <div style={{padding: '1em'}}>
-                            <div className='white-box'>
-                                Test
-                            </div>
-                        </div>
-                    </Page>
-                </Layout>
-            </Route>
-        </Router>
+            </Routes>
+        </BrowserRouter>
     )).add('background color', () => (
-        <Router history={history}>
-            <Route path={location.pathname}>
-                <Layout navItems={navItems} navBarStyle={{backgroundColor: 'red'}}>
-                    <Page title='Hello world!'>
-                        <div style={{padding: '1em'}}>
-                            <div className='white-box'>
-                                Hello world!
+        <BrowserRouter>
+            <Routes>
+                <Route path={location.pathname}>
+                    <Layout navItems={navItems} navBarStyle={{backgroundColor: 'red'}}>
+                        <Page title='Hello world!'>
+                            <div style={{padding: '1em'}}>
+                                <div className='white-box'>
+                                    Hello world!
+                                </div>
                             </div>
-                        </div>
-                    </Page>
-                </Layout>
-            </Route>
-        </Router>
+                        </Page>
+                    </Layout>
+                </Route>
+            </Routes>
+        </BrowserRouter>
     ));
diff --git a/yarn.lock b/yarn.lock
index 94ec96e4..8aba8bf7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2459,6 +2459,11 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
+"@remix-run/router@1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.0.tgz#7e29c4ee85176d9c08cb0f4456bff74d092c5065"
+  integrity sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -10170,16 +10175,6 @@ history@^4.10.1:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-history@^4.7.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
-  dependencies:
-    invariant "^2.2.1"
-    loose-envify "^1.2.0"
-    resolve-pathname "^2.2.0"
-    value-equal "^0.4.0"
-    warning "^3.0.0"
-
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -10668,7 +10663,7 @@ interpret@^3.1.1:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
   integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
 
-invariant@^2.0.0, invariant@^2.2.1, invariant@^2.2.3, invariant@^2.2.4:
+invariant@^2.0.0, invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -12333,7 +12328,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   dependencies:
@@ -13942,12 +13937,6 @@ path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
 
-path-to-regexp@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
-  dependencies:
-    isarray "0.0.1"
-
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -15250,28 +15239,20 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-router-dom@^4.2.2:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
+react-router-dom@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.0.tgz#7b9527a1e29c7fb90736a5f89d54ca01f40e264b"
+  integrity sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==
   dependencies:
-    history "^4.7.2"
-    invariant "^2.2.4"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.1"
-    react-router "^4.3.1"
-    warning "^4.0.1"
+    "@remix-run/router" "1.13.0"
+    react-router "6.20.0"
 
-react-router@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
+react-router@6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.0.tgz#4275a3567ecc55f7703073158048db10096bb539"
+  integrity sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==
   dependencies:
-    history "^4.7.2"
-    hoist-non-react-statics "^2.5.0"
-    invariant "^2.2.4"
-    loose-envify "^1.3.1"
-    path-to-regexp "^1.7.0"
-    prop-types "^15.6.1"
-    warning "^4.0.1"
+    "@remix-run/router" "1.13.0"
 
 react-side-effect@^2.1.0:
   version "2.1.0"
@@ -15974,10 +15955,6 @@ resolve-options@^1.1.0:
   dependencies:
     value-or-function "^3.0.0"
 
-resolve-pathname@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
-
 resolve-pathname@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
@@ -18384,10 +18361,6 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
-value-equal@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
-
 value-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
@@ -18555,18 +18528,6 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
-  dependencies:
-    loose-envify "^1.0.0"
-
-warning@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.1.tgz#66ce376b7fbfe8a887c22bdf0e7349d73d397745"
-  dependencies:
-    loose-envify "^1.0.0"
-
 warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"