[React로 만든 쇼핑몰]detail페이지(useNavigate() & useLocation() )

useNavigate() 파라미터 전달,  useLocation() 파라미터 수신 방법

 

상품아이템 클릭시 해당하는 detail 페이지로 이동

1. 페이지 이동시, 파라미터 전달 방법

1) useNavigate() 훅으로 navigate 함수를 취득한다.

2) navigate() 함수의 첫번째 인자에 이동할 경로, 두번째 인자의 state 속성에 파라미터를 넣어준다.

-  navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) 

 

<App.js> 기존코드

  <div className="item">
    { 
     item.map((a,i)=>{
       return  <div className="items"  key={i}> 
       <Link className="text-link" to={`/detail/${a.id}`}>	
       <Card item={item[i]} i={i}></Card></Link></div>
     })
   
   } 
   </div>

link to를 적용해 원하는 페이지로 이동하는 코드를 짜줌

 

<App.js> 변경코드

      <div className="item">
        {item.map((a, i) => {
          return (
            <div
              onClick={() =>
                navigate(`/detail/${a.id}`, {
                  state: {
                    title: `${item[i].title}`,
                    price: `${item[i].price}`,
                    content: `${item[i].content}`,
                    id: `${item[i].id}`,
                  },
                })
              }
              className="items"
              key={i}
            >
              <Card item={item[i]} i={i}></Card>
            </div>
          );
        })}
      </div>

state값을 전달해주기 위해 useNavigate()를 사용해 페이지 이동하면서 state 값을 전달하고,useLocation()을 통해 데이터를 전달 해줌

2. 이동한 페이지에서,  파라미터 취득 방법

1) useLocation() 훅으로 location을 취득한다.

2) locaiton.state 로 전달 받은 파라미터를 취득할 수 있다.

-  location.state.키 

 

<Detail.js>

export default function Detail() {
  let { id } = useParams();
  const location = useLocation();

  const title = location.state.title;
  const price = location.state.price;
  const content = location.state.content;

useLocation() 훅으로 location을 취득한후 locaiton.state 로 전달 받은 파라미터를 취득할 수 있다.