Add a new command, update the routing system and fix the DefaultNavba…

…rLink eslint issue.
creativetimofficial · Mar 4, 2022 · 781171b · 781171b
1 parent 951d620
commit 781171b
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 48 deletions.
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+pnpFallbackMode: all
diff --git a/package.json b/package.json
@@ -1,9 +1,8 @@
 {
   "name": "soft-ui-dashboard-react",
   "version": "3.1.0",
-  "private": true,
   "author": "Creative Tim",
-  "license": "See license in https://www.creative-tim.com/license",
+  "license": "SEE LICENSE IN <https://www.creative-tim.com/license>",
   "description": "ReactJS version of Soft UI Dashboard by Creative Tim",
   "homepage": "https://demos.creative-tim.com/soft-ui-dashboard-react/#/",
   "bugs": {
@@ -48,7 +47,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
+    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
+    "install:peer-deps": "npm install --legacy-peer-deps"
   },
   "eslintConfig": {
     "extends": [
@@ -69,7 +69,7 @@
     ]
   },
   "devDependencies": {
-    "eslint": "8.9.0",
+    "eslint": "8.10.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.4.0",
     "eslint-plugin-import": "2.25.4",

diff --git a/src/App.js b/src/App.js
@@ -16,7 +16,7 @@ Coded by www.creative-tim.com
 import { useState, useEffect, useMemo } from "react";
 
 // react-router components
-import { Route, Switch, Redirect, useLocation } from "react-router-dom";
+import { Routes, Route, Navigate, useLocation } from "react-router-dom";
 
 // @mui material components
 import { ThemeProvider } from "@mui/material/styles";
@@ -102,7 +102,7 @@ export default function App() {
       }
 
       if (route.route) {
-        return <Route exact path={route.route} component={route.component} key={route.key} />;
+        return <Route exact path={route.route} element={route.component} key={route.key} />;
       }
 
       return null;
@@ -151,10 +151,10 @@ export default function App() {
           </>
         )}
         {layout === "vr" && <Configurator />}
-        <Switch>
+        <Routes>
           {getRoutes(routes)}
-          <Redirect from="*" to="/dashboard" />
-        </Switch>
+          <Route path="*" element={<Navigate to="/dashboard" />} />
+        </Routes>
       </ThemeProvider>
     </CacheProvider>
   ) : (
@@ -175,10 +175,10 @@ export default function App() {
         </>
       )}
       {layout === "vr" && <Configurator />}
-      <Switch>
+      <Routes>
         {getRoutes(routes)}
-        <Redirect from="*" to="/dashboard" />
-      </Switch>
+        <Route path="*" element={<Navigate to="/dashboard" />} />
+      </Routes>
     </ThemeProvider>
   );
 }
diff --git a/src/examples/Navbars/DefaultNavbar/DefaultNavbarLink.js b/src/examples/Navbars/DefaultNavbar/DefaultNavbarLink.js
@@ -28,35 +28,33 @@ import SuiTypography from "components/SuiTypography";
 
 function DefaultNavbarLink({ icon, name, route, light }) {
   return (
-    <>
-      <SuiBox
-        component={Link}
-        to={route}
-        mx={1}
-        p={1}
-        display="flex"
-        alignItems="center"
-        sx={{ cursor: "pointer", userSelect: "none" }}
+    <SuiBox
+      component={Link}
+      to={route}
+      mx={1}
+      p={1}
+      display="flex"
+      alignItems="center"
+      sx={{ cursor: "pointer", userSelect: "none" }}
+    >
+      <Icon
+        sx={{
+          color: ({ palette: { white, secondary } }) => (light ? white.main : secondary.main),
+          verticalAlign: "middle",
+        }}
       >
-        <Icon
-          sx={{
-            color: ({ palette: { white, secondary } }) => (light ? white.main : secondary.main),
-            verticalAlign: "middle",
-          }}
-        >
-          {icon}
-        </Icon>
-        <SuiTypography
-          variant="button"
-          fontWeight="regular"
-          color={light ? "white" : "dark"}
-          textTransform="capitalize"
-          sx={{ width: "100%", lineHeight: 0 }}
-        >
-          &nbsp;{name}
-        </SuiTypography>
-      </SuiBox>
-    </>
+        {icon}
+      </Icon>
+      <SuiTypography
+        variant="button"
+        fontWeight="regular"
+        color={light ? "white" : "dark"}
+        textTransform="capitalize"
+        sx={{ width: "100%", lineHeight: 0 }}
+      >
+        &nbsp;{name}
+      </SuiTypography>
+    </SuiBox>
   );
 }
 

diff --git a/src/routes.js b/src/routes.js
@@ -62,7 +62,7 @@ const routes = [
     key: "dashboard",
     route: "/dashboard",
     icon: <Shop size="12px" />,
-    component: Dashboard,
+    component: <Dashboard />,
     noCollapse: true,
   },
   {
@@ -71,7 +71,7 @@ const routes = [
     key: "tables",
     route: "/tables",
     icon: <Office size="12px" />,
-    component: Tables,
+    component: <Tables />,
     noCollapse: true,
   },
   {
@@ -80,7 +80,7 @@ const routes = [
     key: "billing",
     route: "/billing",
     icon: <CreditCard size="12px" />,
-    component: Billing,
+    component: <Billing />,
     noCollapse: true,
   },
   {
@@ -89,7 +89,7 @@ const routes = [
     key: "virtual-reality",
     route: "/virtual-reality",
     icon: <Cube size="12px" />,
-    component: VirtualReality,
+    component: <VirtualReality />,
     noCollapse: true,
   },
   {
@@ -98,7 +98,7 @@ const routes = [
     key: "rtl",
     route: "/rtl",
     icon: <Settings size="12px" />,
-    component: RTL,
+    component: <RTL />,
     noCollapse: true,
   },
   { type: "title", title: "Account Pages", key: "account-pages" },
@@ -108,7 +108,7 @@ const routes = [
     key: "profile",
     route: "/profile",
     icon: <CustomerSupport size="12px" />,
-    component: Profile,
+    component: <Profile />,
     noCollapse: true,
   },
   {
@@ -117,7 +117,7 @@ const routes = [
     key: "sign-in",
     route: "/authentication/sign-in",
     icon: <Document size="12px" />,
-    component: SignIn,
+    component: <SignIn />,
     noCollapse: true,
   },
   {
@@ -126,7 +126,7 @@ const routes = [
     key: "sign-up",
     route: "/authentication/sign-up",
     icon: <SpaceShip size="12px" />,
-    component: SignUp,
+    component: <SignUp />,
     noCollapse: true,
   },
 ];