리액트 라우터 3 숙제 질문

[Ted]

가나다정렬 버튼을 만들었는데, detail/0, detail/1 해도 원래대로 잘 나와요.
다른 사람 댓글 열심히 찾아봤는데 이동할 때 navigate()를 활용해보라는 댓글을 봤는데요,
지금 Route에는
        <Route path='/detail/:id' element={<Detail shoes={shoes} />} /> 
이런 식으로 되어 있는데
        <Route navigate('/detail/:id')' element={<Detail shoes={shoes} />} />    
이렇게 해도 잘 작동이 안되네요. 검색을 하다보니 결국 detail 페이지에 useEffect까지 쓰는 게 나오던데,
쉬운 방법이 있을까요?

아래에는 button만든 코드 포함입니다
const MainPage = (props) => {
  return (
    <>
      <div className='main-bg'></div>
      <Container>
        <Row>
          {props.shoes.map((a, i) => {
            return (
              <Card
                shoes={props.shoes[i]}
                i={i}
                setShoes={props.setShoes}
              ></Card>
            );
          })}
          ;
        </Row>
      </Container>
      <button
        onClick={() => {
          let copy = [...props.shoes];
          copy.sort((a, b) => {
            if (a.title > b.title) return 1;
            if (a.title < b.title) return -1;
            return 0;
          });
          props.setShoes(copy);
        }}
      >
        가나다순 정렬
      </button>
    </>
  );
};

[codingapple]

navigate는 페이지 이동시켜주는함수라 버튼의 onClick같은거 안에 넣으면 됩니다

[Ted]

가나다정렬 버튼을 만들었는데, detail/0, detail/1 해도 원래대로 잘 나와오는 이유는 뭘까요...?

숙제 목적이 정렬하고 나면 detail/0을 했을 때 정렬된 순서의 0으로 가기 때문에 우리는 원래 고유의 id인 0으로 이동되기 원해서
 let product = props.shoes.find((shoe) => shoe.id == id);
 이런 과정을 걸친거로 이해했거든요...

[codingapple]

state가 정렬되어도 새로고침만 안되면 상세페이지가 정상적으로 잘보일걸요

[글쓴이]

글