fix route url

JunBro1908 · Sep 22, 2024 · aabb092 · aabb092
1 parent 3d814fd
commit aabb092
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "gh-pages -d build",
+    "predeploy": "npm run build"
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,7 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <title>React App Movie Practice</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.js b/src/App.js
@@ -7,8 +7,16 @@ function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/detail/:id" element={<Detail />} />
-        <Route path="/" element={<Home />} />
+        <Route
+          basename={process.env.PUBLIC_URL}
+          path={`/movie/:id`}
+          element={<Detail />}
+        />
+        <Route
+          basename={process.env.PUBLIC_URL}
+          path={`/`}
+          element={<Home />}
+        />
       </Routes>
     </Router>
   );

diff --git a/src/components/Movie.js b/src/components/Movie.js
@@ -9,7 +9,7 @@ function Movie({ id, img, genres = [], title, score, content }) {
     <div className={styles.item} key={id}>
       <img className={styles.image} src={img} alt={title} />
       <div className={styles.info}>
-        <Link to={`/detail/${id}`} className={styles.title}>
+        <Link to={`/movie/${id}`} className={styles.title}>
           {title}
         </Link>
         <p className={styles.genres}>{genres.join(", ")}</p>

diff --git a/src/router/Detail.js b/src/router/Detail.js
@@ -4,6 +4,7 @@ import styles from "../css/Detail.module.css";
 
 function Detail() {
   const { id } = useParams();
+  console.log(id);
   const [movieData, setMovie] = useState({});
 
   useEffect(() => {