From ae469ef2c88dcaf29e629865e076f3c34a3d8d98 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Wed, 24 Nov 2021 11:07:18 -0700
Subject: [PATCH] chore(examples): Updated create-react-app-typescript example
 to use react-router-dom v6

---
 examples/create-react-app-typescript/README.md   |  2 --
 .../create-react-app-typescript/package.json     |  3 +--
 examples/create-react-app-typescript/src/App.tsx | 16 ++++++++--------
 .../create-react-app-typescript/src/index.tsx    |  9 +++++----
 .../create-react-app-typescript/tsconfig.json    |  2 --
 5 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/examples/create-react-app-typescript/README.md b/examples/create-react-app-typescript/README.md
index 92565526bc..4e362dcd58 100644
--- a/examples/create-react-app-typescript/README.md
+++ b/examples/create-react-app-typescript/README.md
@@ -6,8 +6,6 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 This example will setup an example Create React App + ReactMD app that has the following features:
 
-- [tsconfig.json](./tsconfig.json) to allow absolute imports instead of relative imports from the `"src"` directory
-  - `import MyComponent from "components/MyComponent"` instead of `import MyComponent from "../../components/MyComponent"`
 - [\_everything.scss](./src/_everything.scss) to override the default `react-md` theme and feature toggles
 - a reusable [Layout.tsx](./src/components/Layout/Layout.tsx) that:
   - updates all the icons to use `SVGIcon`s instead of `FontIcon`s
diff --git a/examples/create-react-app-typescript/package.json b/examples/create-react-app-typescript/package.json
index cd9d30cba9..da5a5c2279 100644
--- a/examples/create-react-app-typescript/package.json
+++ b/examples/create-react-app-typescript/package.json
@@ -16,11 +16,10 @@
     "@types/node": "^16.6.1",
     "@types/react": "^17.0.17",
     "@types/react-dom": "^17.0.9",
-    "@types/react-router-dom": "^5.1.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-md": "latest",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "sass": "^1.36.0",
     "typescript": "^4.0.3",
diff --git a/examples/create-react-app-typescript/src/App.tsx b/examples/create-react-app-typescript/src/App.tsx
index da87f947b4..8343a0e876 100644
--- a/examples/create-react-app-typescript/src/App.tsx
+++ b/examples/create-react-app-typescript/src/App.tsx
@@ -1,17 +1,17 @@
 import type { ReactElement } from "react";
-import { Route, Switch } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 
-import Layout from "components/Layout";
-import Home from "components/Home";
-import Route1 from "components/Route1";
+import Layout from "./components/Layout";
+import Home from "./components/Home";
+import Route1 from "./components/Route1";
 
 export default function App(): ReactElement {
   return (
     <Layout>
-      <Switch>
-        <Route path="/" exact component={Home} />
-        <Route path="/route-1" component={Route1} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="route-1" element={<Route1 />} />
+      </Routes>
     </Layout>
   );
 }
diff --git a/examples/create-react-app-typescript/src/index.tsx b/examples/create-react-app-typescript/src/index.tsx
index 85b5c39d8c..e39b9803c0 100644
--- a/examples/create-react-app-typescript/src/index.tsx
+++ b/examples/create-react-app-typescript/src/index.tsx
@@ -1,13 +1,14 @@
-import ReactDOM from "react-dom";
 import "./index.scss";
+import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+
 import App from "./App";
-import { BrowserRouter as Router } from "react-router-dom";
 import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
-  <Router>
+  <BrowserRouter>
     <App />
-  </Router>,
+  </BrowserRouter>,
   document.getElementById("root")
 );
 
diff --git a/examples/create-react-app-typescript/tsconfig.json b/examples/create-react-app-typescript/tsconfig.json
index fb49944c75..9d379a3c4a 100644
--- a/examples/create-react-app-typescript/tsconfig.json
+++ b/examples/create-react-app-typescript/tsconfig.json
@@ -2,8 +2,6 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "baseUrl": "src",
-    "rootDir": "src",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,