deps: react-router-dom 4 -> 6 (history 5, react-router-bootstrap 0.26)

Removes the Router/Switch/Route/Link/LinkContainer legacy-context
warnings. Keeps the shared history singleton (used outside React by
NotificationsObserver + Utils/location) via unstable_HistoryRouter, and
bridges v6 hooks back to v4-shaped history/match/location props with a
new withRouterCompat HOC so the ~20 class pages stay untouched.

- <Switch> -> <Routes>, component= -> element=
- Authenticated/Public -> guard components (children or <Navigate replace>)
- LocationListener -> useLocation + useEffect function
- regex route /fire/:type(active|archive|alert)/:id -> /fire/:type/:id
- history.listen callback is ({ location }) in history v5

Browser-verified: SPA nav, /subscriptions->/login auth redirect,
deep-link /fire/archive/:id (params), browser back/forward. REST smoke
byte-identical.

imports/ui/components/Authenticated/Authenticated.js

@@ -1,25 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Route, Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
-const Authenticated = ({ loggingIn, authenticated, component, path, exact, ...rest }) => (
-  <Route
-    path={path}
-    exact={exact}
-    render={props => (
-      authenticated ?
-        (React.createElement(component, { ...props, ...rest, loggingIn, authenticated })) :
-        (<Redirect to="/login" />)
-    )}
-  />
+// v6 route guard: rendered as a route `element` wrapping the real page.
+// Renders its children when authenticated, otherwise redirects to /login.
+const Authenticated = ({ authenticated, children }) => (
+  authenticated ? children : <Navigate to="/login" replace />
 );
 
 Authenticated.propTypes = {
-  loggingIn: PropTypes.bool.isRequired,
   authenticated: PropTypes.bool.isRequired,
-  // elementType (not func): route components may be HOC-wrapped (translate(),
-  // memo, forwardRef), which are objects, not plain functions.
-  component: PropTypes.elementType.isRequired,
+  children: PropTypes.node.isRequired
 };
 
 export default Authenticated;

imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-absolute-path */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
+import withRouterCompat from '../withRouterCompat/withRouterCompat';
 /* import { Nav, NavDropdown } from 'react-bootstrap'; */
 import { withTranslation, Trans } from 'react-i18next';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
@@ -39,4 +39,4 @@ AuthenticatedNavigation.propTypes = {
   name: PropTypes.string.isRequired
 };
 
-export default withTranslation()(withRouter(AuthenticatedNavigation));
+export default withTranslation()(withRouterCompat(AuthenticatedNavigation));

imports/ui/components/History/History.js

@@ -1,5 +1,8 @@
-import createHistory from 'history/createBrowserHistory';
+import { createBrowserHistory } from 'history';
 
-const history = createHistory();
+// Shared history singleton. It backs react-router's <HistoryRouter> (App.js)
+// AND is used outside the React tree (NotificationsObserver push, Utils/location
+// listen), so it must be the same instance the router navigates.
+const history = createBrowserHistory();
 
 export default history;

imports/ui/components/Public/Public.js

@@ -1,27 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Route, Redirect } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
 
-const Public = ({
-  loggingIn, authenticated, component, location, path, exact, ...rest
-}) => (
-  <Route
-    path={path}
-    exact={exact}
-    render={props => (
-      !authenticated ?
-      (React.createElement(component, {
- ...props, ...rest, loggingIn, authenticated
-})) :
-      (<Redirect to={{ pathname: '/subscriptions', state: location.state }} />)
-    )}
-  />
-);
+// v6 route guard for public-only pages (login/signup/auth): rendered as a route
+// `element` wrapping the real page. Redirects authenticated users to their
+// subscriptions, preserving any location state (e.g. a pending new-zone flow).
+const Public = ({ authenticated, children }) => {
+  const location = useLocation();
+  return authenticated
+    ? <Navigate to="/subscriptions" state={location.state} replace />
+    : children;
+};
 
 Public.propTypes = {
-  loggingIn: PropTypes.bool.isRequired,
   authenticated: PropTypes.bool.isRequired,
-  component: PropTypes.elementType.isRequired
+  children: PropTypes.node.isRequired
 };
 
 export default Public;

imports/ui/components/Utils/location.js

@@ -7,9 +7,9 @@ import history from '/imports/ui/components/History/History';
 export const location = new ReactiveVar(history.location.pathname);
 
 if (Meteor.isClient) {
-  history.listen((loc) => { // , action) => {
-    // console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
-    // console.log(`The last navigation action was ${action}`)
+  // history v5 hands the listener a { location, action } update object
+  // (v4 passed the location directly).
+  history.listen(({ location: loc }) => {
     location.set(loc.pathname);
   });
 }

imports/ui/components/withRouterCompat/withRouterCompat.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useNavigate, useLocation, useParams } from 'react-router-dom';
+
+// react-router v6 dropped the `history`/`match`/`location` props that our ~20
+// class page components still read. Rather than convert every class to hooks,
+// this HOC bridges the v6 hooks back to the v4-shaped props those components
+// expect: `history.push/replace(to, state)`, `match.params`, `match.url`,
+// and `location`. New code should use the hooks directly instead.
+export default function withRouterCompat(Component) {
+  function WithRouterCompat(props) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const params = useParams();
+
+    const history = {
+      push: (to, state) => navigate(to, state !== undefined ? { state } : undefined),
+      replace: (to, state) => navigate(to, { replace: true, ...(state !== undefined ? { state } : {}) }),
+      goBack: () => navigate(-1),
+      goForward: () => navigate(1),
+      location
+    };
+
+    // v4 `match.url` was the matched path; for our leaf/exact routes that is
+    // simply the current pathname.
+    const match = { params, url: location.pathname, path: location.pathname };
+
+    return <Component {...props} history={history} location={location} match={match} />;
+  }
+
+  const name = Component.displayName || Component.name || 'Component';
+  WithRouterCompat.displayName = `withRouterCompat(${name})`;
+  return WithRouterCompat;
+}