From bfd80aef8bc1aa17904760b7fef7e24fd3ea9af1 Mon Sep 17 00:00:00 2001
From: Byungwoo LEE <bart2001@naver.com>
Date: Sun, 10 Oct 2021 21:55:15 +0900
Subject: [PATCH] - add <Link> instead of navigating programmatically

---
 package.json                               | 2 +-
 src/components/Content/CardExporter.js     | 9 +++++----
 src/components/Content/ContentExporters.js | 5 -----
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index e1e7bc8f..1cd49e1a 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
 		"react-ga": "^3.3.0",
 		"react-icons": "^4.1.0",
 		"react-redux": "^7.2.2",
-		"react-router-dom": "^5.2.0",
+		"react-router-dom": "^5.3.0",
 		"react-scripts": "^4.0.3",
 		"react-toggle": "^4.1.2",
 		"react-use-localstorage": "^3.5.3",
diff --git a/src/components/Content/CardExporter.js b/src/components/Content/CardExporter.js
index bbb573c8..8bf5fe0e 100644
--- a/src/components/Content/CardExporter.js
+++ b/src/components/Content/CardExporter.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router-dom";
+import { withRouter, Link } from "react-router-dom";
 import axios from "axios";
 import styled from "styled-components";
 import { AiFillStar } from "react-icons/ai";
@@ -11,7 +11,6 @@ import { EXPORTER_API } from "../../config";
 
 const CardExporter = ({
   exporter,
-  cardClick,
   fork,
   mybucket,
   setIsForkModalActive,
@@ -86,7 +85,8 @@ const CardExporter = ({
           )}
         </span>
       </header>
-      <Article onClick={() => cardClick(exporter_id)}>
+			<Article>
+				<Link to={ `/detail/${exporter_id}` }>
         <div>
           <img src={logo_url} alt={name} />
         </div>
@@ -98,7 +98,8 @@ const CardExporter = ({
           </div>
           <p>{description}</p>
         </Section>
-      </Article>
+				</Link>
+			</Article>
       {fork && (
         <Unfork onClick={(e) => unforkRepo(e, exporter_id)} className="unfork">
           <div>
diff --git a/src/components/Content/ContentExporters.js b/src/components/Content/ContentExporters.js
index eb34669f..fd2a2007 100644
--- a/src/components/Content/ContentExporters.js
+++ b/src/components/Content/ContentExporters.js
@@ -14,17 +14,12 @@ const ContentExporters = ({
     location: { pathname },
   } = useHistory();
 
-  const goToDetail = (id) => {
-    push(`/detail/${id}`);
-  };
-
   return (
     <ExporterContainer fork={fork} mybucket={mybucket}>
       {exporters &&
         exporters.map((exporter) => (
           <CardExporter
             key={exporter.exporter_id}
-            cardClick={pathname === "/" ? goToDetail : goToDetail}
             fork={fork}
             mybucket={mybucket}
             setIsForkModalActive={setIsForkModalActive}