add routes

package.json

@@ -10,6 +10,7 @@
     "json-loader": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "sass": "^1.72.0",
     "web-vitals": "^2.1.4"

src/App.js

@@ -1,4 +1,3 @@
-import './sass/main.scss';
 import Header from './partials/header';
 import Search from './partials/search';
 import Frameworks from './partials/frameworks';

src/index.js

@@ -1,13 +1,20 @@
 import React from 'react';
+import { Routes, Route, BrowserRouter } from "react-router-dom";
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import './sass/main.scss';
 import App from './App';
+import Framework from './partials/framework';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />} />
+        <Route path="/:framework/:component?" element={<Framework />} />
+      </Routes>
+    </BrowserRouter>
   </React.StrictMode>
 );
 

src/partials/framework.jsx

@@ -0,0 +1,36 @@
+import React, {useEffect, useState} from 'react';
+import Header from './header';
+import Search from './search';
+import { useParams } from 'react-router-dom';
+import SingleFramework from './single-framework';
+import frameworkData from '../json';
+
+const Framework = () => {
+
+    const { framework } = useParams();
+    const [selectedFramework, SetSelectedFramework] = useState({});
+
+    useEffect(() => {
+
+        if ( framework && frameworkData && frameworkData.length > 0 ) {
+
+            const foundFramework = frameworkData.find(o => o.slug === framework);
+
+            if ( foundFramework ) {
+                SetSelectedFramework( foundFramework );
+            }
+
+        }
+
+    }, [framework]);
+
+    return(
+        <div className="App">
+            <Header />
+            <Search />
+            <SingleFramework framework={selectedFramework}  />
+        </div>
+    );
+}
+
+export default Framework;

src/partials/frameworks.jsx

@@ -1,39 +1,34 @@
-import React,  {useState} from 'react';
+import React from 'react';
 import frameworkData from '../json';
-import SingleFramework from './single-framework';
+// import SingleFramework from './single-framework';
+import { Link } from "react-router-dom";
 
 const Frameworks = () => {
 
-    const [selectedFramework, setSelectedFramework] = useState({});
-
-    const handleFrameworkSelect = ( item ) => {
-        setSelectedFramework(item);
-    }
-
     return(
         <div className="container">
 
-            {(!selectedFramework || ( selectedFramework && Object.keys(selectedFramework).length === 0)) &&
-                <div className="row">
+            <div className="row">
                     <div className="col-12 mt-5">
                         <h2>Frameworks</h2>
 
                         { frameworkData &&
                             <ul className="frameworks-list">
                                 {frameworkData.map( (framework, i) => {
                                     return (
-                                        <li key={i} onClick={() => setSelectedFramework(framework)} className="pointer text-decoration-hover">{framework.name}</li>
+                                        <li key={i}>
+                                            <Link to={`/${framework.slug}`} className="text-dark">{framework.name}</Link>
+                                        </li>
                                     );
                                 })}
                             </ul>
                         }
                     </div>
                 </div>
-            }
 
-            { selectedFramework && Object.keys(selectedFramework).length !== 0 &&
+            {/* { selectedFramework && Object.keys(selectedFramework).length !== 0 &&
                 <SingleFramework framework={selectedFramework} onSelect={(data) => handleFrameworkSelect(data)} />
-            }
+            } */}
 
         </div>
     );

src/partials/single-framework.jsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import Component from './component';
+import { Link } from "react-router-dom";
 
 const SingleFramework = (props) => {
 
-    const { framework, onSelect} = props;
+    const { framework } = props;
 
     return(
-        <>
+        <div className="container">
             <div className="row">
                 <div className="col-12 my-5">
                     <div className="mb-4">
-                        <span className="pointer text-decoration-hover go-back" onClick={() => onSelect({})}>Back</span>
+                        <Link to="/">Go back</Link>
                     </div>
                     <h2>{framework.name}</h2>
                 </div>
@@ -26,7 +27,7 @@ const SingleFramework = (props) => {
                     </>
                 }
             </div>
-        </>
+        </div>
     );
 
 }