build(deps-dev): upgrade react-router-dom (#5764)

* build(deps-dev): upgrade react-router-dom

* fix StaticRouter

* clean up

* clean up

* upgrade react-g-analytics

* disable analytics for temp

* Revert "disable analytics for temp"

This reverts commit f71a9ac.

* fix api for history package

* fix

* optimize AnalyticsRouter

* upgrade react-router-dom

* disable lazyCompilation

* enable replace

* use layout

package.json

@@ -149,7 +149,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.2.2",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.2.1",
     "react-spring": "^9.3.2",
     "react-tiny-popover": "5",
     "react-use": "^17.3.1",

src/AnalyticsRouter.jsx

@@ -2,26 +2,23 @@
  * based on https://github.com/seeden/react-g-analytics
  * refactored against new version of react/react-router-dom
  */
-import { Router, BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
-import { createBrowserHistory } from 'history';
+import { useEffect } from 'react';
 AnalyticsRouter.propTypes = {
-  ...BrowserRouter.propTypes,
   id: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
   set: PropTypes.object,
 };
 export default function AnalyticsRouter(props) {
   const { id, set, children } = props;
-  const history = createBrowserHistory();
 
   return (
-    <Router history={history}>
-      <GoogleAnalytics id={id} set={set} history={history}>
+    <BrowserRouter>
+      <GoogleAnalytics id={id} set={set}>
         {children}
       </GoogleAnalytics>
-    </Router>
+    </BrowserRouter>
   );
 }
 
@@ -61,7 +58,6 @@ GoogleAnalytics.propTypes = {
   id: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
   set: PropTypes.object,
-  history: PropTypes.object,
 };
 
 function googleAnalyticsCommand(what, options, ...args) {
@@ -83,47 +79,27 @@ function googleAnalyticsSend(...options) {
 }
 
 function GoogleAnalytics(props) {
-  const { id, set, children, history } = props;
+  const { id, set, children } = props;
 
-  const [unListen, setUnListen] = useState(null);
-  const [latestUrl, setLatestUrl] = useState(null);
+  const location = useLocation();
 
   useEffect(() => {
     initGoogleAnalytics(id, set);
+  }, [id, set]);
 
-    const pageView = (location) => {
-      const path = location.pathname + location.search;
-      if (latestUrl === path) {
-        return;
-      }
-
-      setLatestUrl(path);
-
-      // user can change the title
-      setTimeout(() => {
-        googleAnalyticsSet({
-          page: path,
-          title: document.title,
-          location: document.location,
-        });
-
-        googleAnalyticsSend({
-          hitType: 'pageview',
-        });
-      }, 0);
-    };
+  useEffect(() => {
+    const path = location.pathname + location.search;
 
-    setUnListen(history.listen(pageView));
+    googleAnalyticsSet({
+      page: path,
+      title: document.title,
+      location: document.location,
+    });
 
-    // send current pageview
-    pageView(history.location);
+    googleAnalyticsSend({
+      hitType: 'pageview',
+    });
+  }, [location]);
 
-    return () => {
-      if (unListen) {
-        unListen();
-        setUnListen(null);
-      }
-    };
-  }, [id, set, history, unListen, latestUrl]);
   return <>{children}</>;
 }

src/App.jsx

@@ -1,12 +1,4 @@
-import { Route } from 'react-router-dom';
 import Site from './components/Site/Site';
 export default function App() {
-  return (
-    <Route
-      path="/"
-      render={(props) => (
-        <Site {...props} import={(path) => import(`./content/${path}`)} />
-      )}
-    />
-  );
+  return <Site import={(path) => import(`./content/${path}`)} />;
 }

src/components/Navigation/Navigation.jsx

@@ -22,16 +22,16 @@ import HelloDarkness from '../HelloDarkness';
 NavigationItem.propTypes = {
   children: PropTypes.node.isRequired,
   url: PropTypes.string.isRequired,
-  isActive: PropTypes.func,
+  isactive: PropTypes.func,
 };
 
-function NavigationItem({ children, url, isActive }) {
+function NavigationItem({ children, url, isactive }) {
   let obj = {};
   // decide if the link is active or not by providing a function
   // otherwise we'll let react-dom makes the decision for us
-  if (isActive) {
+  if (isactive) {
     obj = {
-      isActive,
+      isactive,
     };
   }
   const classes =
@@ -51,9 +51,10 @@ function NavigationItem({ children, url, isActive }) {
   return (
     <NavLink
       {...obj}
-      activeClassName="active-menu"
+      className={({ isActive }) =>
+        isActive ? `${classes} !text-blue-200` : classes
+      }
       to={url}
-      className={classes}
     >
       {children}
     </NavLink>
@@ -194,9 +195,9 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
             return link.children;
           })
           .map((link) => {
-            if (link.isActive) {
+            if (link.isactive) {
               // hide the children if the link is not active
-              if (!link.isActive({}, location)) {
+              if (!link.isactive({}, location)) {
                 return null;
               }
             }
@@ -209,19 +210,26 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
                   className="md:max-w-[1024px] md:mx-auto md:grid md:grid-flow-col md:justify-end md:gap-x-[20px] md:px-[24px]"
                   data-testid="sub-navigation"
                 >
-                  {link.children.map((child) => (
-                    <NavLink
-                      key={child.url}
-                      to={child.url}
-                      title={child.title}
-                      className="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white"
-                      activeClassName="active-submenu"
-                    >
-                      {child.content === 'api'
-                        ? child.content.toUpperCase()
-                        : child.content}
-                    </NavLink>
-                  ))}
+                  {link.children.map((child) => {
+                    const classNames =
+                      'text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white';
+                    return (
+                      <NavLink
+                        key={child.url}
+                        to={child.url}
+                        title={child.title}
+                        className={({ isActive }) =>
+                          isActive
+                            ? `!text-black dark:!text-white ${classNames}`
+                            : classNames
+                        }
+                      >
+                        {child.content === 'api'
+                          ? child.content.toUpperCase()
+                          : child.content}
+                      </NavLink>
+                    );
+                  })}
                 </div>
               </div>
             );

src/components/SidebarItem/SidebarItem.jsx

@@ -80,7 +80,7 @@ export default class SidebarItem extends Component {
         )}
 
         <NavLink
-          exact
+          end
           key={this.props.url}
           className={`${block}__title`}
           to={this.props.url}

src/components/Site/Site.jsx

@@ -1,6 +1,12 @@
 // Import External Dependencies
 import { Fragment, useEffect, useState } from 'react';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import {
+  Routes,
+  Route,
+  useLocation,
+  useNavigate,
+  Outlet,
+} from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { MDXProvider } from '@mdx-js/react';
 
@@ -51,14 +57,11 @@ const mdxComponents = {
 };
 
 Site.propTypes = {
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired,
-    hash: PropTypes.string,
-  }),
-  history: PropTypes.any,
   import: PropTypes.func,
 };
 function Site(props) {
+  const location = useLocation();
+  const navigate = useNavigate();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
 
   /**
@@ -136,7 +139,6 @@ function Site(props) {
     }
   }, []);
 
-  const { location, history } = props;
   let sections = extractSections(Content);
   let section = sections.find(({ url }) => location.pathname.startsWith(url));
   let pages = extractPages(Content);
@@ -172,9 +174,9 @@ function Site(props) {
   useEffect(() => {
     const target = clientSideRedirections(location);
     if (target) {
-      history.replace(target);
+      navigate(target, { replace: true });
     }
-  }, [location, history]);
+  }, [location, navigate]);
 
   return (
     <MDXProvider components={mdxComponents}>
@@ -235,7 +237,7 @@ function Site(props) {
               {
                 content: 'Documentation',
                 url: '/concepts/',
-                isActive: (_, location) => {
+                isactive: (_, location) => {
                   return /^\/(api|concepts|configuration|guides|loaders|migrate|plugins)/.test(
                     location.pathname
                   );
@@ -261,63 +263,55 @@ function Site(props) {
           />
         ) : null}
 
-        <Switch>
-          <Route
-            exact
-            strict
-            path="/:url*"
-            render={(props) => <Redirect to={`${props.location.pathname}/`} />}
-          />
-          <Route path="/" exact component={Splash} />
+        <Routes>
+          <Route index element={<Splash />} />
           <Route
-            render={() => (
+            element={
               <Container className="site__content">
-                <Switch>
-                  <Route path="/vote" component={Vote} />
-                  <Route path="/app-shell" component={() => <Fragment />} />
-                  {pages.map((page) => (
-                    <Route
-                      key={page.url}
-                      exact={true}
-                      path={page.url}
-                      render={() => {
-                        let path = page.path.replace('src/content/', '');
-                        let content = props.import(path);
-                        const { previous, next } = getAdjacentPages(
-                          sidebarPages,
-                          page,
-                          'url'
-                        );
-                        return (
-                          <Fragment>
-                            <Sponsors />
-                            <Sidebar
-                              className="site__sidebar"
-                              currentPage={location.pathname}
-                              pages={sidebarPages}
-                            />
-                            <Page
-                              {...page}
-                              content={content}
-                              previous={previous}
-                              next={next}
-                            />
-                          </Fragment>
-                        );
-                      }}
-                    />
-                  ))}
-                  <Route render={() => <PageNotFound />} />
-                </Switch>
+                <Outlet />
               </Container>
-            )}
-          />
-        </Switch>
+            }
+          >
+            <Route path="vote" element={<Vote />} />
+            <Route path="app-shell" element={<Fragment />} />
+            {pages.map((page) => {
+              let path = page.path.replace('src/content/', '');
+              let content = props.import(path);
+              const { previous, next } = getAdjacentPages(
+                sidebarPages,
+                page,
+                'url'
+              );
+              return (
+                <Route
+                  key={page.url}
+                  path={page.url}
+                  element={
+                    <Fragment>
+                      <Sponsors />
+                      <Sidebar
+                        className="site__sidebar"
+                        currentPage={location.pathname}
+                        pages={sidebarPages}
+                      />
+                      <Page
+                        {...page}
+                        content={content}
+                        previous={previous}
+                        next={next}
+                      />
+                    </Fragment>
+                  }
+                />
+              );
+            })}
+            <Route path="*" element={<PageNotFound />} />
+          </Route>
+        </Routes>
         <Footer />
         <NotificationBar />
       </div>
     </MDXProvider>
   );
 }
-
 export default Site;