do 404 modal redirect on unknown routes

src/components/NotifyAndRedirect.jsx

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+
+import { Redirect, withRouter } from 'react-router-dom';
+
+import { Trans } from '@lingui/macro';
+
+import { withRootDialog } from '../contexts/RootDialog';
+
+class NotifyAndRedirect extends Component {
+  constructor (props) {
+    super(props);
+
+    const { setRootDialogMessage, location } = this.props;
+    setRootDialogMessage({
+      title: '404',
+      bodyText: (
+        <Trans>
+          Cannot find route
+          <strong>{` ${location.pathname}`}</strong>
+          .
+        </Trans>
+      ),
+      variant: 'warning'
+    });
+  }
+
+  render () {
+    const { to, push, from, exact, strict, sensitive } = this.props;
+    return (
+      <Redirect
+        to={to}
+        push={push}
+        from={from}
+        exact={exact}
+        strict={strict}
+        sensitive={sensitive}
+      />
+    );
+  }
+}
+
+export default withRootDialog(withRouter(NotifyAndRedirect));

src/index.jsx

@@ -20,6 +20,7 @@ import './components/SelectedList/styles.scss';
 import { Config } from './contexts/Config';
 
 import Background from './components/Background';
+import NotifyAndRedirect from './components/NotifyAndRedirect';
 
 import RootProvider from './RootProvider';
 import App from './App';
@@ -220,17 +221,22 @@ export async function main (render) {
                         },
                       ]}
                       render={({ routeGroups }) => (
-                        routeGroups
+                        <Switch>
-                          .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
+                          {routeGroups
-                          .map(({ component: PageComponent, path }) => (
+                            .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
-                            <Route
+                            .map(({ component: PageComponent, path }) => (
-                              key={path}
+                              <Route
-                              path={path}
+                                key={path}
-                              render={({ match }) => (
+                                path={path}
-                                <PageComponent match={match} />
+                                render={({ match }) => (
-                              )}
+                                  <PageComponent match={match} />
-                            />
+                                )}
-                          ))
+                              />
+                            ))
+                            .concat([
+                              <NotifyAndRedirect key="redirect" to="/" />
+                            ])}
+                        </Switch>
                       )}
                     />
                   )}

src/pages/Organizations/screens/Organization/Organization.jsx

@@ -17,6 +17,7 @@ import { withNetwork } from '../../../../contexts/Network';
 
 import Tabs from '../../../../components/Tabs/Tabs';
 import Tab from '../../../../components/Tabs/Tab';
+import NotifyAndRedirect from '../../../../components/NotifyAndRedirect';
 
 import OrganizationAccess from './OrganizationAccess';
 import OrganizationDetail from './OrganizationDetail';
@@ -175,6 +176,7 @@ class Organization extends Component {
                 />
               )}
             />
+            {organization && <NotifyAndRedirect to={`/organizations/${match.params.id}/details`} />}
           </Switch>
           {error ? 'error!' : ''}
           {loading ? 'loading...' : ''}