Merge remote-tracking branch 'parent/main' into upstream-20231021

app/javascript/mastodon/features/ui/util/react_router_helpers.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import { Component, PureComponent, cloneElement, Children } from 'react';
+import { Component, cloneElement, Children } from 'react';
 
-import { Switch, Route } from 'react-router-dom';
+import { Switch, Route, useLocation } from 'react-router-dom';
 
 import StackTrace from 'stacktrace-js';
 
@@ -10,27 +10,20 @@ import ColumnLoading from '../components/column_loading';
 import BundleContainer from '../containers/bundle_container';
 
 // Small wrapper to pass multiColumn to the route components
-export class WrappedSwitch extends PureComponent {
-  static contextTypes = {
-    router: PropTypes.object,
-  };
+export const WrappedSwitch = ({ multiColumn, children }) => {
+  const  location = useLocation();
 
-  render () {
-    const { multiColumn, children } = this.props;
-    const { location } = this.context.router.route;
+  const decklessLocation = multiColumn && location.pathname.startsWith('/deck')
+    ? {...location, pathname: location.pathname.slice(5)}
+    : location;
 
-    const decklessLocation = multiColumn && location.pathname.startsWith('/deck')
-      ? {...location, pathname: location.pathname.slice(5)}
-      : location;
+  return (
+    <Switch location={decklessLocation}>
+      {Children.map(children, child => child ? cloneElement(child, { multiColumn }) : null)}
+    </Switch>
+  );
+};
 
-    return (
-      <Switch location={decklessLocation}>
-        {Children.map(children, child => child ? cloneElement(child, { multiColumn }) : null)}
-      </Switch>
-    );
-  }
-
-}
 
 WrappedSwitch.propTypes = {
   multiColumn: PropTypes.bool,