Use react router and router link

Author: realstoman

src/App.js

@@ -1,3 +1,4 @@
+import { BrowserRouter as Router } from 'react-router-dom';
 import './css/App.css';
 import AppHeader from './components/AppHeader';
 import AppFooter from './components/AppFooter';
@@ -6,9 +7,11 @@ import Home from './pages';
 function App() {
 	return (
 		<div className="App">
-			<AppHeader></AppHeader>
-			<Home />
-			<AppFooter></AppFooter>
+			<Router>
+				<AppHeader></AppHeader>
+				<Home />
+				<AppFooter></AppFooter>
+			</Router>
 		</div>
 	);
 }

src/components/ProjectSingle.js

@@ -4,17 +4,21 @@ const ProjectSingle = () => {
 	return (
 		<Link
 			to="/projects/single-project"
-			class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
+			className="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			aria-label="Single Project"
 		>
 			<div>
-				<img src="" class="rounded-t-3xl border-none" />
+				<img
+					src="assets/images/project.jpg"
+					className="rounded-t-3xl border-none"
+					alt="Single Project"
+				/>
 			</div>
-			<div class="text-center px-4 py-6">
-				<p class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
+			<div className="text-center px-4 py-6">
+				<p className="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
 					A Simple Project
 				</p>
-				<span class="text-lg text-ternary-dark dark:text-ternary-light">
+				<span className="text-lg text-ternary-dark dark:text-ternary-light">
 					Here is the description
 				</span>
 			</div>

src/components/ProjectsGrid.js

@@ -1,4 +1,5 @@
 import { FiSearch } from 'react-icons/fi';
+import ProjectSingle from './ProjectSingle';
 
 const ProjectsGrid = () => {
 	return (
@@ -91,7 +92,7 @@ const ProjectsGrid = () => {
 				:key="project.id"
 				:project="project"
 			/> */}
-				A single project
+				<ProjectSingle></ProjectSingle>
 			</div>
 			{/* Projects grid end */}
 		</section>