update src/Views/Home/Sidebar/index.js and router.js

src/Views/Home/Sidebar/index.js

@@ -1,8 +1,18 @@
 import React from "react";
 import { connect } from "react-redux";
 import { components } from "../../../redux/actions";
+import { useNavigate } from "react-router-dom";
+import data from "../../../redux/data";
 
 function Sidebar({ list, setActive }) {
+  React.useEffect(() => {
+    setActive(
+      data.find(
+        (component) => component.name === window.location.pathname.split("/")[2]
+      )
+    );
+  }, []);
+  const navigation = useNavigate();
   return (
     <div className="lg:flex lg:flex-col lg:w-1/6 lg:h-full ltr bg-[#f5f5f5] overflow-y-auto scrollYDesign">
       <header className="w-full h-16 flex flex-row items-center p-4 bg-gray-600">
@@ -19,7 +29,10 @@ function Sidebar({ list, setActive }) {
             <li
               key={index}
               className="w-full h-12 flex items-center p-2 odd:bg-gray-300 even:bg-slate-400 odd:text-gray-600 even:text-[#1f232a] text-center font-sansbold cursor-pointer"
-              onClick={() => setActive(material)}
+              onClick={() => {
+                navigation(`/components/${material.name}`);
+                setActive(material);
+              }}
             >
               {material.name}
             </li>

src/router.js

@@ -14,7 +14,8 @@ function Router() {
     >
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<Home />} />
+          <Route exact path="/" element={<Home />} />
+          <Route path="/components/:id" element={<Home />} />
           <Route
             path="*"
             element={