chore(examples): Updated create-react-app-typescript example to use r…

…eact-router-dom v6
mlaursen · Nov 24, 2021 · ae469ef · ae469ef
1 parent 3c4d1ea
commit ae469ef
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -2,8 +2,6 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "baseUrl": "src",
-    "rootDir": "src",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,