update react-router example to v6 (#8941)

* update react-router example to v6 * add package.json * add package.lock * fix yarn.lock issue * rm .yarn Co-authored-by: DAK <[email protected]> Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jul 29, 2021 · 36a6fdc · 36a6fdc
1 parent c35f866
commit 36a6fdc
Show file tree

Hide file tree

Showing 3 changed files with 16,625 additions and 10,559 deletions.
diff --git a/packages/react/examples/react-router/package.json b/packages/react/examples/react-router/package.json
@@ -6,11 +6,14 @@
     "carbon-components": "latest",
     "carbon-components-react": "latest",
     "carbon-icons": "latest",
+    "history": "^5.0.0",
     "node-sass": "^4.11.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.3"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "^6.0.0-beta.0",
+    "react-router-dom": "^6.0.0-beta.0",
+    "react-scripts": "^4.0.3",
+    "yarn": "^1.22.10"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/packages/react/examples/react-router/src/App.js b/packages/react/examples/react-router/src/App.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Breadcrumb, BreadcrumbItem, Tabs, Tab } from 'carbon-components-react';
-import { Switch, Route, Link, Redirect, withRouter } from 'react-router-dom';
+import { Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
 import './App.scss';
 
 const LandingPage = ({ children }) => (
@@ -24,23 +24,28 @@ const LandingPage = ({ children }) => (
   </div>
 );
 
-const TabOne = withRouter(({ history }) => (
+const TabOne = () => {
+  let navigate = useNavigate();
+  return (
   <Tabs selected={0}>
-    <Tab onClick={() => history.push('/')} label="Tab 1">
+    <Tab onClick={() => navigate('/')} label="Tab 1">
       <div>Tab 1 content.</div>
     </Tab>
-    <Tab onClick={() => history.push('/tab-two')} label="Tab 2" />
+    <Tab onClick={() => navigate('/tab-two')} label="Tab 2" />
   </Tabs>
-));
+)};
 
-const TabTwo = withRouter(({ history }) => (
+const TabTwo = () => {
+  let navigate = useNavigate();
+
+  return (
   <Tabs selected={1}>
-    <Tab onClick={() => history.push('/')} label="Tab 1" />
-    <Tab onClick={() => history.push('/tab-two')} label="Tab 2">
+    <Tab onClick={() => navigate('/')} label="Tab 1" />
+    <Tab onClick={() => navigate('/tab-two')} label="Tab 2">
       <div>Tab 2 content.</div>
     </Tab>
   </Tabs>
-));
+)};
 
 const TabOneContent = () => (
   <LandingPage>
@@ -65,6 +70,7 @@ const PageOne = () => (
         <Link to="/page-one">page 1</Link>
       </BreadcrumbItem>
     </Breadcrumb>
+    <p>Page 1 content.</p>
   </div>
 );
 
@@ -79,20 +85,21 @@ const PageTwo = () => (
         <Link to="/page-two">page 2</Link>
       </BreadcrumbItem>
     </Breadcrumb>
+    <p>Page 2 content.</p>
   </div>
 );
 
 class App extends Component {
   render() {
     return (
       <div className="page-content">
-        <Switch>
-          <Route exact={true} path="/" component={TabOneContent} />
-          <Route exact={true} path="/page-one" component={PageOne} />
-          <Route exact={true} path="/page-two" component={PageTwo} />
-          <Route exact={true} path="/tab-two" component={TabTwoContent} />
-          <Redirect to="/" />
-        </Switch>
+        <Routes>
+          <Route exact={true} path="/" element={<TabOneContent />} />
+          <Route exact={true} path="/page-one" element={<PageOne />} />
+          <Route exact={true} path="/page-two" element={<PageTwo />} />
+          <Route exact={true} path="/tab-two" element={<TabTwoContent />} />
+          <Navigate to="/" />
+          </Routes>
       </div>
     );
   }