route 손보는 중

client/src/App.js

@@ -18,6 +18,7 @@ function App() {
 
   return (
     <div>
+      {console.log("match.params=",match.params(product))}
       <MainNav />
       <SubNav />
       <Router>
@@ -25,8 +26,8 @@ function App() {
           <Route exact path="/" component={Home} />
           <Route path="/login" component={Login} />
           <Route path="/signup" component={Signup} />
-          <Route path="/product" component={Product} />
-          <Route path="/productslist" component={ProductsList} />
+          {/* <Route path="/product" component={Product} /> */}
+          <Route path="/product/:product" component={ProductsList} />
           <Route path="/admin" component={Admin} />
           <Route path="/regist" component={ProductRegist} />
           <Route path="/shoppingcart" component={ShoppingCart} />

client/src/Components/SubNav.js

@@ -14,9 +14,9 @@ function SubNav() {
             const response = await axios.get('/api/categorys')
             let list = []
             Object.keys(response.data[0]).forEach((ele) => {
-                const url = "/" + ele.toLowerCase()
+                const url = ele.toLowerCase()
                 list.push(
-                    <Nav.Link href={url}>{ele}</Nav.Link>
+                    <Nav.Link href={`/product/${url}`}>{ele}</Nav.Link>
                 )
             })
             setCategorysDiv(list)

client/src/Pages/Home.js

@@ -3,6 +3,9 @@ import { Card, Container, Row } from 'react-bootstrap';
 
 
 function Home() {
+    
+
+
     return (
         <div>
             <Container className="my-5">

client/src/Pages/ProductsList.js

@@ -25,6 +25,7 @@ function ProductsList() {
 
     return (
         <div>
+            
             <style type="text/css">
                 {`
                 .btn {
@@ -118,7 +119,7 @@ function ProductsList() {
                     </Card>
                 </Row>
             </Container>
-            <Pagination />
+            {/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */}
         </div>
     )
 }

client/src/Pages/Signup.js

@@ -16,7 +16,7 @@ function Signup() {
     const [user, setUser] = useState('')
     const [error, setError] = useState('')
 
-const [validated, setValidated] = useState(false);
+    const [validated, setValidated] = useState(false);
 
     function handleChange(event) {
         const { name, value } = event.target
@@ -41,25 +41,25 @@ const [validated, setValidated] = useState(false);
         } catch (error) {
             catchErrors(error, setError)
         }
-        
-        
+
+
 
     }
-    function checkPassword(event){
-        const p1=user.password
-        const p2=user.password2
+    function checkPassword(event) {
+        const p1 = user.password
+        const p2 = user.password2
 
-        if(p1 !== p2){
+        if (p1 !== p2) {
             event.preventDefault();
             event.stopPropagation();
             alert('비밀번호가 일치하지 않습니다.')
             return false
-            
-        }else{
+
+        } else {
             return true
         }
     }
-        
+
 
     return (
         <div>
@@ -156,7 +156,7 @@ const [validated, setValidated] = useState(false);
                                         value={user.password2}
                                         required
                                         onChange={handleChange}
-                                         />
+                                    />
                                     <Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
                                     </Form.Control.Feedback>
                                 </Form.Row>
@@ -177,7 +177,7 @@ const [validated, setValidated] = useState(false);
                             <Button
                                 style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block
                                 onClick={checkPassword}
-                                >
+                            >
                                 Sign Up
                             </Button>
                         </Form>