React 강의 중 [Redux 5] 숙제 질문 있습니다.

[유슬기]

강사님 안녕하세요.
해당 강의에서  cart 페이지로 이동 시 추가된 아이템 목록이 보이지 않는 현상이 있습니다.
강의 하단내용에 답변해주신 것처럼 Route 이용하여 처리하면 된다고 하셨는데요,
말씀하신대로 제가 처리한 건지 잘 모르겠습니다. 봐주셨으면 좋겠습니다.
저는 메인화면 소스에서 내비게이션 컴포넌트를 별도로 관리하고 있습니다.

* App.js
function App() {
    ....
    return () {
        <div className="App">
            (생략)
            <Route path="/cart" element={ <Cart /> } />

            (생략)
        </div>
    }
    

    ....
}

// 내비게이션
function NavBarTop() {
    return () {
        ....
        <Nav.Link href="/cart">Cart</Nav.Link>
        ....
    }
}

[유슬기]

보시기에 어려우실 듯 하여 전체 코드 중 페이지 이동하는 내비게이션 하위 컴포넌트까지만 올립니다...
참고 부탁드리고 데이터가 왜 추가가 안되는지 봐주셨으면 좋겠어요..

/* eslint-disable */
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { createContext, useEffect, useState } from 'react';
import { Container, Nav, Navbar, Row, Button, Card, CardGroup, Alert } from 'react-bootstrap';
import imgSrc from './img/bg.png'; // 이미지 사용
import data from './data.js'; // 경로는 . 으로 시작
import { Routes, Route, useNavigate } from 'react-router-dom';
import axios from 'axios'; 
 
// 페이지별 import 
import { Detail } from './pages/detail.js'; 
import { Err404 } from './pages/error.js'; 
import About from './pages/about.js'; 
import { Event } from './pages/event.js'; 
import Cart from './pages/cart.js';
  
 // Context API Setting 1
 export let Context1 = createContext() // state 보관함 생성
  
function App() { 
  let [shoes, setShoes] = useState(data) 
  let navigate = useNavigate() 
  let [cnt, setCnt] = useState(0) 
  let [show, setShow] = useState(true) 
  let [stock] = useState([10, 11, 12])
 
  return ( 
    <div className="App"> 
      <NavBarTop /> 
      <Routes> 
      <Route path="/" element={ // 메인페이지 
        <> 
          <BgImg /> 
          <Container> 
            <Button onClick={async () => { 
              { show ? <LoadingAlert/> : null } 
              await axios.get("https://codingapple1.github.io/shop/data2.json") 
              .then((result) => { 
                let copy = [...shoes, ...result.data] 
                setShoes(copy) 
                setCnt(++cnt) 
                setShow(false) 
              }).catch(() => { 
                console.log("첫번째 서버통신 실패")
              }) 
              
              if(cnt == 2) { // 두번 클릭했을 때 7,8,9 데이터 가져오기 
                await axios.get("https://codingapple1.github.io/shop/data3.json") 
                .then((result) => { 
                  let copy = [...shoes, ...result.data] 
                  setShoes(copy) 
                  setCnt(++cnt) 
                }).catch(() => { 
                  console.log("두번째 서버통신 실패") 
                }) 
              } else if(cnt > 2) { 
                alert("더이상 상품이 존재하지 않습니다.") 
              } 
            }}> 상품추가 </Button>
             <Row> 
               { 
                 (Math.floor(shoes.length) / 3) === 1 
                 ? <Cols shoes={shoes} len={shoes.length} navigate={navigate} /> 
                 : <Row> 
                     <Cols shoes={shoes} len={shoes.length} navigate={navigate} /> 
                  </Row> 
                } 
              </Row> 
            </Container> 
          </> 
         } />
        
         <Route path="/detail/:id" element={ 
           <Context1.Provider value={{ stock, shoes }}> 
             <Detail shoes={shoes} /> 
           </Context1.Provider> 
          } /> 

          {/* 장바구니 만들기 */}
         <Route path="/cart" element={ <Cart/> } />
         {/* ****************************************************************************** */}
 
         <Route path="/about" element={<About />}>
         <Route path="member" element={<div>member element</div>} /> 
         <Route path="location" element={<div>location element</div>} />
       </Route> 
 
       <Route path="*" element={<Err404 />} />
     </Routes>
   </div>
 );
}

// 내비게이션
 
function NavBarTop() {
  return (
    <Navbar bg="dark" variant="dark">
    <Container>
      <Navbar.Brand href="/">SHOP</Navbar.Brand> 
      <Nav className="me-auto"> 
        <Nav.Link href="#home">INTRODUCTION</Nav.Link> 
        <Nav.Link href="/cart">Cart</Nav.Link> 
        <Nav.Link href="#pricing">QnA</Nav.Link> 
      </Nav> 
    </Container>
  </Navbar> 
  )
}

(하위 컴포넌트 생략) 

export default App;

[codingapple]

a태그는 새로고침됩니다 페이지이동은 navigate() 함수를 이용합시다

[유슬기]

바로 해결했습니다. props 전달이 안됐네요. 감사합니다!

[글쓴이]

글