라우터 상세페이지 질문

[남지윤]

안녕하세요 선생님 라우터로 서브페이지 제작중 연결이 잘 안되서 질문드립니다
skin 컴포넌트에서 데이터를 받아온걸 skin컴포넌트안에 라우터를 적어서 디테일 페이지로 연결되게 했는데
사진을 클릭해서 skin/0 들어가면 props로 전송한 product안에 내용이( find 문법이 대상을 못 찾는)undifined? 로 내용이 없다고 에러가 뜹니다.

그래서 라우터들을 다시 App.js에 적으면 연결은 되는데 Skin 컴포넌트 안에서 받은 데이터를 App.js에 똑같이 useEffect로 적어야하는데
그러면 skin페이지에 단독으로 있는 버튼을 클릭했을때 받아오는 axios데이터는 App.js에 또 적어야하는건지 이방법이 아닌거 같은데 잘안되서 여쭤봅니다 ㅠ

[codingapple]

Detail 안에서 product 출력해봤는데 아무것도 없으면
Skin 컴포넌트 방문을 안해서 그 안에있던 ajax요청도 안날라가서 그런걸수도요

[남지윤]

선생님 그럼 왜 라우터를 App.js에 쓰면 레이아웃이 잘보이는데 
Skin.js에 연결 라우터를 쓰면 레이아웃 자체가 안보입니다 이유를 잘 모르겠습니다.. 
App.js에 라우터를 쓰고 /skin 페이지에서 console.log(product)를 하면 내용이 잘 들어가져있습니다.

그리고 Skin컴포넌트가 왜 방문이 안되는지도 도저히 모르겠습니다.. 
skin컴포넌트안에
<Routes>
         <Route path="/skin" element={<Skin/>}/>
         <Route path='/skin/:id' element={<Detail product={product} />}/>
 </Routes>
작성했는데.. 왜 스킨페이지 방문이 안되는걸까요 
skin 컴포넌트에서만 받을수있는 ajax데이터는 skin 컴포넌트 안에서만 detail로 props로 전달하는게 맞는거같은데 
<Route path='/skin/:id' element={<Detail product={product} />}/> 이부분이 왜 detail로 product가 전송이 안되는지도 모르겠습니다..ㅠㅠ

App.js에서
<Routes>
        <Route path='/'element={<Main/>}/>
        <Route path="/skin" element={<Skin/>}/>
        <Route path='/skin/:id' element={<Detail/>}/>  
     </Routes>
이렇게 작성시에는 레이아웃도 잘보입니다. 근데 App.js에서는 <Route path='/skin/:id' element={<Detail product={product} />}/>
detail로 props 전송이 안되는게 아닐까요 ..?

[codingapple]

Skin컴포넌트안에 /skin방문시 Skin컴포넌트 보여달라고 해서 이상한듯요 App 컴포넌트에 라우트 작성합시다
props전송 잘하고 있는거면 props전송하고있는 변수에 아무것도 안들어있는걸수도요

[글쓴이]

글