chore: Updated remaining docs and tests for react-router-dom v6

Author: mlaursen

package.json

@@ -66,8 +66,6 @@
     "@types/reach__router": "^1.3.9",
     "@types/react": "^17.0.36",
     "@types/react-dom": "^17.0.11",
-    "@types/react-router": "^5.1.17",
-    "@types/react-router-dom": "^5.3.1",
     "@types/react-test-renderer": "^17.0.1",
     "@types/react-transition-group": "^4.4.3",
     "chokidar": "^3.5.2",

packages/dev-utils/src/sandbox/createPackageJson.ts

@@ -17,13 +17,7 @@ function toDependencyJson(
   );
 }
 
-const SIMPLE_AT_TYPES = [
-  "qs",
-  "react-router",
-  "react-router-dom",
-  "react-transition-group",
-  "react-virtualized",
-];
+const SIMPLE_AT_TYPES = ["qs", "react-transition-group", "react-virtualized"];
 
 function getTypesPackage(packageName: string): string | null {
   if (SIMPLE_AT_TYPES.includes(packageName)) {

packages/documentation/package.json

@@ -37,7 +37,7 @@
     "react-hook-form": "^7.20.2",
     "react-marked-renderer": "^1.0.0",
     "react-md": "^3.1.1",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.0.2",
     "react-swipeable": "^6.2.0",
     "react-transition-group": "^4.4.2",
     "react-virtualized": "^9.22.3",

packages/documentation/src/components/Demos/Link/ThirdPartyRoutingLibraries.md

@@ -16,7 +16,7 @@ props into the react-md `Link`:
 ```tsx
 import { ReactElement } from "react";
 import { render } from "react-dom";
-import { Link as ReactRouterLink, LinkProps } from "react-router";
+import { Link as ReactRouterLink, LinkProps } from "react-router-dom";
 import { Link as ReactMDLink } from "@react-md/link";
 
 function Link(props: LinkProps): ReactElement {

packages/layout/README.md

@@ -88,8 +88,8 @@ import { Text } from "@react-md/typography";
 import {
   BrowserRouter,
   Link,
+  Routes,
   Route,
-  Switch,
   useLocation,
 } from "react-router-dom";
 
@@ -149,12 +149,12 @@ function App(): ReactElement {
       navHeaderTitle="Example Nav Title"
       treeProps={useLayoutNavigation(navItems, pathname, Link)}
     >
-      <Switch>
-        <Route path="/route-1" component={Route1} />
-        <Route path="/route-2" component={Route2} />
-        <Route path="/route-3" component={Route3} />
-        <Route path="/" component={Home} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="route-1" element={<Route1 />} />
+        <Route path="route-2" element={<Route2 />} />
+        <Route path="route-3" element={<Route3 />} />
+      </Routes>
     </Layout>
   );
 }

packages/layout/package.json

@@ -53,7 +53,7 @@
   "devDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.3.0"
+    "react-router-dom": "^6.0.2"
   },
   "peerDependencies": {
     "react": ">= 16.14",

packages/layout/src/__tests__/Layout.tsx

@@ -4,7 +4,7 @@ import {
   Link,
   BrowserRouter,
   useLocation,
-  Switch,
+  Routes,
   Route,
 } from "react-router-dom";
 import { mocked } from "ts-jest/utils";
@@ -498,6 +498,18 @@ describe("Layout", () => {
 
   describe("navigation behavior", () => {
     it("should work with react-router", () => {
+      function Route2(): ReactElement {
+        return (
+          <>
+            <h1>Route 2</h1>
+            <Routes>
+              <Route path="1" element={<h2>Route 2-1</h2>} />
+              <Route path="2" element={<h2>Route 2-2</h2>} />
+              <Route path="3" element={<h2>Route 2-3</h2>} />
+            </Routes>
+          </>
+        );
+      }
       function Test(): ReactElement {
         const { pathname } = useLocation();
         return (
@@ -508,34 +520,13 @@ describe("Layout", () => {
               Link
             )}
           >
-            <Switch>
-              <Route path="/" exact>
-                <h1>Home</h1>
-              </Route>
-              <Route path="/route-1">
-                <h1>Route 1</h1>
-              </Route>
-              <Route path="/route-2">
-                <h1>Route 2</h1>
-                <Switch>
-                  <Route path="/route-2/1">
-                    <h2>Route 2-1</h2>
-                  </Route>
-                  <Route path="/route-2/2">
-                    <h2>Route 2-2</h2>
-                  </Route>
-                  <Route path="/route-2/3">
-                    <h2>Route 2-3</h2>
-                  </Route>
-                </Switch>
-              </Route>
-              <Route path="/route-3">
-                <h1>Route 3</h1>
-              </Route>
-              <Route path="/route-4">
-                <h1>Route 4</h1>
-              </Route>
-            </Switch>
+            <Routes>
+              <Route path="/" element={<h1>Home</h1>} />
+              <Route path="route-1" element={<h1>Route 1</h1>} />
+              <Route path="route-2/*" element={<Route2 />} />
+              <Route path="route-3" element={<h1>Route 3</h1>} />
+              <Route path="route-4" element={<h1>Route 4</h1>} />
+            </Routes>
           </Layout>
         );
       }

packages/link/README.md

@@ -43,6 +43,8 @@ import {
   Link as ReactRouterLink,
   LinkProps as ReactRouterLinkProps,
   BrowserRouter,
+  Routes,
+  Route,
 } from "react-router-dom";
 import { Link as ReactMDLink, LinkProps as RMDLinkProps } from "@react-md/link";
 
@@ -66,8 +68,10 @@ function App(): ReactElement {
       <Link to="/">Home</Link>
       <Link to="/about">About</Link>
 
-      <Route exact path="/" component={Home} />
-      <Route path="/about" component={About} />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="about" element={<About />} />
+      </Routes>
     </BrowserRouter>
   );
 }

packages/link/package.json

@@ -40,7 +40,7 @@
     "@reach/router": "^1.3.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.3.0"
+    "react-router-dom": "^6.0.2"
   },
   "peerDependencies": {
     "react": ">= 16.14",

packages/link/src/__tests__/Link.tsx

@@ -1,6 +1,7 @@
 import { Link as ReachLink } from "@reach/router";
 import { render } from "@testing-library/react";
-import { Link as ReactRouterLink, StaticRouter } from "react-router-dom";
+import { Link as ReactRouterLink } from "react-router-dom";
+import { StaticRouter } from "react-router-dom/server";
 import renderer from "react-test-renderer";
 
 import { Link } from "../Link";
@@ -27,7 +28,7 @@ describe("Link", () => {
       [key: string]: any;
     }) =>
       renderer.create(
-        <StaticRouter context={{}}>
+        <StaticRouter location="/">
           <Link {...props} component={ReactRouterLink}>
             {children}
           </Link>