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;
+}

imports/ui/layouts/App/App.js

@@ -1,9 +1,9 @@
 /* eslint-disable jsx-a11y/no-href */
 /* eslint import/no-absolute-path: [2, { esmodule: false, commonjs: false, amd: false }] */
 
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Router, Switch, Route } from 'react-router-dom';
+import { unstable_HistoryRouter as HistoryRouter, Routes, Route, useLocation } from 'react-router-dom';
 import { Container } from 'react-bootstrap';
 import { I18nextProvider } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
@@ -22,6 +22,7 @@ import Reconnect from '../../components/Reconnect/Reconnect';
 import Navigation from '../../components/Navigation/Navigation';
 import Authenticated from '../../components/Authenticated/Authenticated';
 import Public from '../../components/Public/Public';
+import withRouterCompat from '../../components/withRouterCompat/withRouterCompat';
 import Index from '../../pages/Index/Index';
 import Subscriptions from '../../pages/Subscriptions/Subscriptions';
 import NewSubscription from '../../pages/NewSubscription/NewSubscription';
@@ -56,35 +57,16 @@ import history from '../../components/History/History';
 import '../../components/NotificationsObserver/NotificationsObserver';
 import './App.scss';
 
-class LocationListener extends Component {
-  // https://stackoverflow.com/questions/43512450/react-router-v4-route-onchange-event
-
-  componentDidMount() {
+// Tracks route changes for Piwik/analytics. v6 replaces the old
+// contextTypes.router.history.listen wiring with the useLocation hook.
+const LocationListener = ({ children }) => {
+  const location = useLocation();
+  useEffect(() => {
     // https://github.com/GoogleChrome/rendertron#rendering-budget-timeout
     window.renderComplete = true;
-    this.handleLocationChange(this.context.router.history.location);
-    this.unlisten =
-      this.context.router.history.listen(this.handleLocationChange);
-  }
-
-  componentWillUnmount() {
-    this.unlisten();
-  }
-
-  handleLocationChange(location) {
-    // your staff here
-    console.log(`----- location: '${location.pathname}'`);
     Meteor.Piwik.trackPage(location.pathname);
-  }
-
-  // https://stackoverflow.com/questions/39133797/react-only-return-props-children
-  render() {
-    return this.props.children;
-  }
-}
-
-LocationListener.contextTypes = {
-  router: PropTypes.object
+  }, [location.pathname]);
+  return children;
 };
 
 LocationListener.propTypes = {
@@ -94,6 +76,27 @@ LocationListener.propTypes = {
   ]).isRequired
 };
 
+// v6 routes render an `element`, not a `component`, and no longer pass down
+// history/match/location. Wrap each class page once (module scope, so the
+// component identity stays stable across renders) with the v4-compat HOC.
+const IndexR = withRouterCompat(Index);
+const SubscriptionsR = withRouterCompat(Subscriptions);
+const NewSubscriptionR = withRouterCompat(NewSubscription);
+const ViewSubscriptionR = withRouterCompat(ViewSubscription);
+const EditSubscriptionR = withRouterCompat(EditSubscription);
+const ProfileR = withRouterCompat(Profile);
+const StatusR = withRouterCompat(Status);
+const FiresMapR = withRouterCompat(FiresMap);
+const ZonesMapR = withRouterCompat(ZonesMap);
+const FiresR = withRouterCompat(Fires);
+const AuthR = withRouterCompat(Auth);
+const SignupR = withRouterCompat(Signup);
+const LoginR = withRouterCompat(Login);
+const LogoutR = withRouterCompat(Logout);
+const VerifyEmailR = withRouterCompat(VerifyEmail);
+const RecoverPasswordR = withRouterCompat(RecoverPassword);
+const ResetPasswordR = withRouterCompat(ResetPassword);
+
 const App = props => (
   /* https://react.i18next.com/components/i18nextprovider.html */
   <div>
@@ -101,7 +104,7 @@ const App = props => (
     <ErrorBoundary>
       <I18nextProvider i18n={i18n}>
         <ErrorBoundary appName={i18n.t('AppNameFull')} title={i18n.t('general-error-title')} subTitle={i18n.t('general-error-description')}>
-          <Router history={history}>
+          <HistoryRouter history={history}>
             <LocationListener>
               { !props.loading &&
               <div className="App">
@@ -116,37 +119,38 @@ const App = props => (
                 <ReSendEmail {...props} />
 
                 <Container>
-                  <Switch>
-                    <Route exact name="index" path="/" component={Index} />
-                    <Authenticated exact path="/subscriptions" component={Subscriptions} {...props} />
-                    <Authenticated exact path="/subscriptions/new" component={NewSubscription} {...props} />
-                    <Authenticated exact path="/subscriptions/:_id" component={ViewSubscription} {...props} />
-                    <Authenticated exact path="/subscriptions/:_id/edit" component={EditSubscription} {...props} />
-                    <Authenticated exact path="/profile" component={Profile} {...props} />
-                    <Authenticated exact path="/status" component={Status} {...props} />
-                    <Route path="/fires" component={FiresMap} industries={false} {...props} />
-                    <Route path="/zones" component={ZonesMap} {...props} />
+                  <Routes>
+                    <Route path="/" element={<IndexR {...props} />} />
+                    <Route path="/subscriptions" element={<Authenticated authenticated={props.authenticated}><SubscriptionsR {...props} /></Authenticated>} />
+                    <Route path="/subscriptions/new" element={<Authenticated authenticated={props.authenticated}><NewSubscriptionR {...props} /></Authenticated>} />
+                    <Route path="/subscriptions/:_id" element={<Authenticated authenticated={props.authenticated}><ViewSubscriptionR {...props} /></Authenticated>} />
+                    <Route path="/subscriptions/:_id/edit" element={<Authenticated authenticated={props.authenticated}><EditSubscriptionR {...props} /></Authenticated>} />
+                    <Route path="/profile" element={<Authenticated authenticated={props.authenticated}><ProfileR {...props} /></Authenticated>} />
+                    <Route path="/status" element={<Authenticated authenticated={props.authenticated}><StatusR {...props} /></Authenticated>} />
+                    <Route path="/fires" element={<FiresMapR industries={false} {...props} />} />
+                    <Route path="/zones" element={<ZonesMapR {...props} />} />
 
-                    <Route path="/fire/:type(active|archive|alert)/:id" component={Fires} {...props} />
-                    <Route path="/fire/:id" component={Fires} {...props} />
-                    <Public path="/auth/:token" component={Auth} {...props} />
-                    <Public path="/signup" component={Signup} {...props} />
-                    <Public path="/login" component={Login} {...props} />
-                    <Route path="/logout" component={Logout} {...props} />
-                    <Route path="/sandbox" component={Sandbox} {...props} />
-                    <Route path="/error" component={TestError} {...props} />
+                    {/* v6 has no regex params; `:type` is validated inside Fires. */}
+                    <Route path="/fire/:type/:id" element={<FiresR {...props} />} />
+                    <Route path="/fire/:id" element={<FiresR {...props} />} />
+                    <Route path="/auth/:token" element={<Public authenticated={props.authenticated}><AuthR {...props} /></Public>} />
+                    <Route path="/signup" element={<Public authenticated={props.authenticated}><SignupR {...props} /></Public>} />
+                    <Route path="/login" element={<Public authenticated={props.authenticated}><LoginR {...props} /></Public>} />
+                    <Route path="/logout" element={<LogoutR {...props} />} />
+                    <Route path="/sandbox" element={<Sandbox {...props} />} />
+                    <Route path="/error" element={<TestError {...props} />} />
 
-                    <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
-                    <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
-                    <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
-                    <Route name="terms" path="/terms" component={Terms} />
-                    <Route name="privacy" path="/privacy" component={Privacy} />
-                    <Route name="license" path="/license" component={License} />
-                    <Route name="credits" path="/credits" component={Credits} />
-                    <Route name="about" path="/about" component={About} />
+                    <Route path="/verify-email/:token" element={<VerifyEmailR />} />
+                    <Route path="/recover-password" element={<RecoverPasswordR />} />
+                    <Route path="/reset-password/:token" element={<ResetPasswordR />} />
+                    <Route path="/terms" element={<Terms />} />
+                    <Route path="/privacy" element={<Privacy />} />
+                    <Route path="/license" element={<License />} />
+                    <Route path="/credits" element={<Credits />} />
+                    <Route path="/about" element={<About />} />
 
-                    <Route component={NotFound} />
-                  </Switch>
+                    <Route path="*" element={<NotFound />} />
+                  </Routes>
                 </Container>
                 <Footer />
                 <Reconnect {...props} />
@@ -154,7 +158,7 @@ const App = props => (
                 {props.i18nReady.get() && <CookieConsent /> }
               </div>}
             </LocationListener>
-          </Router>
+          </HistoryRouter>
         </ErrorBoundary>
       </I18nextProvider>
     </ErrorBoundary> }